Angular 2 Un composant wrapper qui ajoute des composants dynamiques de manière déclarative


Exemple

Un composant personnalisé qui prend le type d'un composant en entrée et crée une instance de ce type de composant à l'intérieur de lui-même. Lorsque l'entrée est mise à jour, le composant dynamique ajouté précédemment est supprimé et le nouveau composant ajouté.

@Component({
  selector: 'dcl-wrapper',
  template: `<div #target></div>`
})
export class DclWrapper {
  @ViewChild('target', {
    read: ViewContainerRef
  }) target;
  @Input() type;
  cmpRef: ComponentRef;
  private isViewInitialized: boolean = false;

  constructor(private resolver: ComponentResolver) {}

  updateComponent() {
    if (!this.isViewInitialized) {
      return;
    }
    if (this.cmpRef) {
      this.cmpRef.destroy();
    }
    this.resolver.resolveComponent(this.type).then((factory: ComponentFactory < any > ) => {
      this.cmpRef = this.target.createComponent(factory)
        // to access the created instance use
        // this.cmpRef.instance.someProperty = 'someValue';
        // this.cmpRef.instance.someOutput.subscribe(val => doSomething());
    });
  }

  ngOnChanges() {
    this.updateComponent();
  }

  ngAfterViewInit() {
    this.isViewInitialized = true;
    this.updateComponent();
  }

  ngOnDestroy() {
    if (this.cmpRef) {
      this.cmpRef.destroy();
    }
  }
}

Cela vous permet de créer des composants dynamiques comme

<dcl-wrapper [type]="someComponentType"></dcl-wrapper>

Exemple Plunker