角2で高次コンポーネントを作成する方法

Question

高次コンポーネント（HOC）は、Reactコミュニティで共通のパターンです。 HOCの内容が分からない場合はthis articleを参照

Angular 2で意味がありますか？ HOCを作成するには？ 例はありますか？

Answer 1

私はHOC（Angular 2のRecomposeのようなもの）にも非常に興味があります。私は最近、角度構造ディレクティブを使用して、mapToProps HOC 'Recompose for Angular - mapToInputsにアナログを作成しようとしていました。私はより良いアプローチを探しています。

@Component({ 
    selector: 'user-list', 
    template: ` 
     <h2>{{status}} users</h2> 
     <div *ngFor="let item of data">{{item}}</div> 
    ` 
    }) 
    export class UserList { 
    @Input() data: Array<any>; 
    @Input() status: string; 
    } 

    @Directive({selector: '[mapInputs]'}) 
    export class MapInputs { 
    component; 

    @Input() set mapInputsComponent(component) { 
    this.component = component; 
    } 

    @Input() set mapInputs(fn) { 
     this.vc.clear(); 
     let factory = this.componentFactoryResolver.resolveComponentFactory(this.component); 
     let componetRef = this.vc.createComponent(factory); 

     let inputs = fn(); 
     console.log(inputs); 
     Object.entries(inputs).forEach(([key, value]) => { 
     componetRef.instance[key] = value; 
     }); 
    } 

    constructor(private vc: ViewContainerRef, 
      private componentFactoryResolver: ComponentFactoryResolver) { 
    } 
    } 

    @Component({ 
    selector: 'my-app', 
    template: ` 
     <div> 
     <button (click)="doubledata()">Doubel Data</button> 
     <div *mapInputs="filterBy.bind(null, {data:data, status:'active'}); component: component"></div> 
     <div *mapInputs="filterBy.bind(null, {data:data, status:'passive'}); component: component"></div> 
     <div *mapInputs="filterBy.bind(null, {data:data, status:'blocked'}); component: component"></div> 
     </div> 
    `, 
    }) 
    export class App { 
    name: string; 
    component = UserList; 
    data = ['active', 'active', 'passive', 'blocked', 'blocked']; 
    filterBy = (context) => { 
     return { 
      status: context.status, 
      data: context.data.filter(el => el === context.status); 
     }; 
    } 

    doubledata(){ 
     this.data = this.data.concat(this.data); 
    } 

    constructor() { 
     this.name = `Angular! v${VERSION.full}` 
    } 
    }