Angular 2动态添加组件时将数据传递给组件 [英] Angular 2 Passing data to component when dynamically adding the component

问题描述

点击按钮后，我就动态添加了一个组件.

I have dynamically added a component on the click of a button .

以下是我的小部件的代码.具有颜色属性的简单div设置为输入.

Below is the code for my widget . Simple div with color property being set as input.

Widget.tmpl.html

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

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

In the Widget component i am taking color as my input . This component works fine when i add it manually . But now i am trying to dynamically add the component and also need to pass the Color Value to the Widget Component.

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

Below is the code in the app.component.ts where i am calling addItem() on the button click .

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()方法中，我正在将我的窗口小部件组件动态添加到视图中.该组件被添加罚款.但是问题是在动态添加时如何传递color属性.基于创建小部件时我传递的颜色，我希望它以红色或绿色等显示.在这种情况下如何绑定属性?

In the addItem() method i am dynamically adding my widget component to my view. The component gets added fine . But the problem is how to pass the color property when dynamically adding . Based on what color i pass when creating the widget i want it to be displayed in red or green etc. How to property bind in this scenario?

以下是一些代码:

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中，如下所示:

In the above code i am emitting my color to the parent app.component.ts but since i have dynamically added the widget component , i dont know where to add this code (changes)="onChange($event)". I tried to add this code in the div as shown below :

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

但是它不起作用.

推荐答案

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

这篇关于Angular 2动态添加组件时将数据传递给组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！