Góc 2: Tải thành phần động với các tham số @Input và @Output

Question

Hiện tại tôi đang tải một số thành phần của mình động với đoạn mã này.

export class ComponentOutlet { 

    constructor(
     private vcRef: ViewContainerRef, 
     private compiler: Compiler, 
     private dataService: DataService 
    ) { } 

    private _createDynamicComponent() { 

     // Some logic to decide which component should be loaded 
     return MyComponent; 
    } 


    ngOnChanges() { 

     this.compiler.compileComponentAsync(this._createDynamicComponent()) 
      .then(factory => { 
       const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector); 
       this.vcRef.clear(); 
       this.vcRef.createComponent(factory, 0, injector); 
      }); 
    } 

Vấn đề là có một số MyComponent@Input và Output bindings. Có thể thiết lập các ràng buộc này ở đây không? Làm thế nào tôi có thể đạt được điều đó?

Answer 1

Chỉ có thể sử dụng các kết nối vào đầu vào và đầu ra cho các thành phần được thêm tĩnh vào mẫu thành phần khác.

Trong trường hợp của bạn, bạn có thể làm điều đó phải nhất thiết như

var cmpRef = this.vcRef.createComponent(factory, 0, injector); 
cmpRef.instance.someInput = value; 
cmpRef.instance.someOutput.subscribe(data => this.data = data);