각도 2로 고차원 구성 요소를 만드는 방법

Question

고위 주문 구성 요소 (HOC)는 React 커뮤니티에서 일반적인 패턴입니다. HOC가 무엇인지 알 수없는 경우 this article을 참조하십시오.

Angular 2에서 의미가 있습니까? HOC를 만드는 방법? 예제가 있습니까?

Answer 1

저는 HOC (Angular 2와 같은 Recompose)와 비슷한 것에도 매우 관심이 있습니다. 나는 최근 Angular 구조 지시어를 사용하여 angleToProps 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}` 
    } 
    }