Truyền đầu vào trong khi tạo thành phần góc 2 động bằng cách sử dụng ComponentResolver

Question

Tôi có thể tải thành phần Angular 2 động bằng cách sử dụng ComponentResolver và ViewContainerRef.

Tuy nhiên, tôi không thể tìm ra cách chuyển bất kỳ biến đầu vào nào của thành phần con này.

parent.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(""); 
    } 
} 

như vậy trong ví dụ trên nói loadChild đang được kêu gọi một nút bấm, tôi có thể tải Child1Component, nhưng làm thế nào để pass var1 Đầu vào của trẻ? Cũng Làm thế nào để đăng ký close EventEmitter trang trí với @Output

Answer 1

---

Bạn cần phải vượt qua nó phải nhất thiết như:

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

cũng tương tự với đăng ký xử lý cho kết quả đầu ra.

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

Answer 2

Đây là cách tôi đã làm nó với góc 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;