Cách tạo các thành phần bậc cao hơn trong Angular 2

Question

Các thành phần bậc cao hơn (HOC) là một mô hình phổ biến trong cộng đồng React. Xem this article nếu bạn không biết HOC

Chúng có ý nghĩa gì trong Angular 2? Cách tạo HOC? Bất kỳ ví dụ nào?

Answer 1

Tôi cũng rất quan tâm đến một cái gì đó tương tự như HOC (Recompose như trong Angular 2). Gần đây tôi đã cố gắng tạo ra một tương tự để mapToProps HOC 'Recompose for Angular - mapToInputs sử dụng chỉ thị cấu trúc Angular. Tôi đang tìm cách tiếp cận tốt hơn.

@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}` 
    } 
    }