Angular 2动态添加组件时将数据传递给组件

Question

我通过单击按钮动态添加了一个组件。

下面是我的小部件的代码。将颜色属性设置为输入的简单 div。

Widget.tmpl.html

 div class="{{color}}" (click)="ChangeColor()"

在 Widget 组件中，我将颜色作为输入。当我手动添加时，该组件工作正常。但现在我正在尝试动态添加组件，还需要将颜色值传递给小部件组件。

下面是 app.component.ts 中的代码，我在点击按钮时调用 addItem()。

app.component.ts

export class AppComponent  {
  @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;
  private componentFactory: ComponentFactory<any>;

  constructor(componentFactoryResolver: ComponentFactoryResolver, compiler: Compiler) {
    this.componentFactory = componentFactoryResolver.resolveComponentFactory(MyAppComponent);

  }

  addItem () {
   this.viewContainerRef.createComponent(this.componentFactory, 0);
  }

 public  myValue:string = 'red';

 onChange(val: any) { this.myValue = val; } }

在 addItem() 方法中，我动态地将我的小部件组件添加到我的 View 中。该组件添加得很好。但问题是动态添加时如何传递color属性。基于我在创建小部件时传递的颜色，我希望它以红色或绿色等显示。如何在这种情况下绑定(bind)属性？

这里是一些代码:

export class MyAppComponent { 

    @Input() color; 
    @Output('changes') result: EventEmitter<any> = new EventEmitter(); 

    public constructor() { 
    }

    ChangeColor() {
        this.ToggleColor();
        this.result.emit(this.color);// Emitting the color to the parent.        
    }

    ToggleColor() {
        if (this.color == "red")
            this.color = "blue";
        else
            this.color = "red";
    }
}

在上面的代码中，我将我的颜色发送到父 app.component.ts，但是由于我已经动态添加了小部件组件，所以我不知道在哪里添加此代码 (changes)="onChange($event)"。我尝试将此代码添加到 div 中，如下所示:

<div class="{{color}}" (click)="ChangeColor()" (changes)="onChange($event)"></div>

但它不起作用。

Answer 1

var cmpRef = this.viewContainerRef.createComponent(this.componentFactory, 0);
cmpRef.instance.someProp = 'someValue';
cmpRef.instance.someObservable.subscribe(val => this.someProp = val);