Angular2 - 将值传递给使用 ComponentFactory 创建的动态组件答案

【问题标题】：Angular2 - Pass values to a dynamic component created with ComponentFactoryAngular2 - 将值传递给使用 ComponentFactory 创建的动态组件
【发布时间】：2016-12-27 04:32:10
【问题描述】：

我在 how to create dynamic components 上遵循 Günter Zöchbauer 的建议我想知道如何将值传递给它 - 例如，子组件有一个@input。

使用上述问题中给出的 plunker 示例 - plunker - 我如何向子组件传递一个字符串，我们称之为消息，然后在单击“添加”按钮时显示。

以下是子组件外观的示例：

import {Component OnChanges, Input} from '@angular/core'

    @Component({
      selector: 'hello',
      providers: [],
      template: `<h1>{{message}}</h1>`,
      directives: []
    })
    export class HelloComponent implements OnChanges {
      @Input() message:any;

      constructor() {
      }

      ngOnChanges(changes:any){
      }
    }

【问题讨论】：

标签： angular angular2-directives

【解决方案1】：

你可以试试下面，

  let instance  = this.viewContainerRef.createComponent(this.componentFactory, 0).instance;
  instance.message = "some text!!";

这里是Plunker!!

【讨论】：

我想先传递一个虚拟数据来显示加载屏幕，然后从 API 获取数据后，我想传递它。有可能吗