Angular 2 Un componente wrapper che aggiunge i componenti dinamici in modo dichiarativo


Esempio

Un componente personalizzato che accetta il tipo di un componente come input e crea un'istanza di quel tipo di componente all'interno di se stesso. Quando l'input viene aggiornato, il componente dinamico aggiunto in precedenza viene rimosso e viene aggiunto il nuovo.

@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();
    }
  }
}

Questo ti permette di creare componenti dinamici come

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

Esempio di Plunker