Comment créer des composants d'ordre supérieur dans Angular 2

Question

Higher Order Components (HOC) est un modèle commun à la communauté React. Voir cet article si vous ne savez pas ce qu'est un HOC

Ont-ils un sens dans Angular 2 ? Comment faire un HOC ? Des exemples ?

Answer 1

Je suis également très intéressé par quelque chose de similaire à HOC (Recompose like in Angular 2). J'ai récemment essayé de créer un analogue de mapToProps HOC' Recompose pour Angular - mapToInputs en utilisant la directive structurelle Angular. Je suis à la recherche d'une meilleure approche.

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

Answer 2

Utilisez NgComponentOutlet

Cas simple

@Component({selector: 'hello-world', template: 'Hello World!'})
class HelloWorld {
}

@Component({
  selector: 'ng-component-outlet-simple-example',
  template: `<ng-container *ngComponentOutlet="myComponent"></ng-container>`
})
class NgTemplateOutletSimpleExample {
  // This field is necessary to expose HelloWorld to the template.
  myComponent= HelloWorld;
}

Les cas avancés comprenant la fourniture de l'injecteur et du contenu sont disponibles en documentation officielle