Vorbei an Input während der Erstellung Eckig 2-Komponente, die dynamisch mit ComponentResolver

Ich bin in der Lage zu laden, dynamische Winkel 2-Komponente mit ComponentResolver und ViewContainerRef.

Jedoch bin ich nicht in der Lage, herauszufinden, wie um eine input-variable, eine untergeordnete Komponente in diese.

Eltern.ts

    @Component({
     selector: "parent",
     template: "<div #childContainer ></div>"
    })
    export class ParentComponent {
      @ViewChild("childContainer", { read: ViewContainerRef }) childContainer: ViewContainerRef;

      constructor(private viewContainer: ViewContainerRef, private _cr: ComponentResolver) {}

      loadChild = (): void => {
           this._cr.resolveComponent(Child1Component).then(cmpFactory => {               
              this.childContainer.createComponent(cmpFactory);
           });
      }
    }

child1

 @Component({
   selector: "child1",
   template: "<div>{{var1}}</div><button (click)='closeMenu()'>Close</button>"
 })
 export class Child1Component {
    @Input() var1: string;
    @Output() close: EventEmitter<any> = new EventEmitter<any>();

    constructor() {}

    closeMenu = (): void => {
      this.close.emit("");
    }
 }

also im obigen Beispiel sagen loadChild aufgerufen wird, ist auf eine Schaltfläche klicken, ich bin in der Lage zu laden Child1Component, aber wie übergeben var1 Input des Kindes?
Auch, Wie Sie Sie abonnieren, um close EventEmitter verziert mit @Output

InformationsquelleAutor der Frage Madhu Ranjan | 2016-05-27

  1. 36

    Müssen Sie es unbedingt möchten:

    loadChild(): void {
  this._cr.resolveComponent(Child1Component).then(cmpFactory => {               
    let cmpRef = this.childContainer.createComponent(cmpFactory);
     cmpRef.instance.var1 = someValue;  
   });
 }

    auch ähnlich mit dem registrieren von Handlern für die Ausgänge.

    loadChild(): void {
  this._cr.resolveComponent(Child1Component).then(cmpFactory => {                
    let instance: any = this.childContainer.createComponent(cmpFactory).instance;
    if (!!instance.close) {
      //close is eventemitter decorated with @output 
      instance.close.subscribe(this.close);
    }
  });
}

close = (): void => {
  //do cleanup stuff..
  this.childContainer.clear();
}

    InformationsquelleAutor der Antwort Günter Zöchbauer

  2. 3

    Dies ist, wie ich es mit den Eckigen 2.2.3

    let nodeElement = document.getElementById("test");
let compFactory = this.componentFactoryResolver.resolveComponentFactory(AnyCustomComponent);
let component = compFactory.create(this.viewContainerRef.injector, null, nodeElement);
//This is where you pass the @Input
component.instance.anyInput = anyInput;

    InformationsquelleAutor der Antwort S.Galarneau

Schreibe einen Kommentar