Ich habe auf Knopfdruck dynamisch eine Komponente hinzugefügt.

Below ist der Code für mein Widget. Einfaches Div, bei dem die Farbeigenschaft als Eingabe festgelegt ist.

Widget.tmpl.html

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

In der Widget-Komponente nehme ich Farbe als meine Eingabe. Diese Komponente funktioniert gut, wenn ich es manuell hinzufüge. Aber jetzt versuche ich, die Komponente dynamisch hinzuzufügen und muss auch den Farbwert an die Widget-Komponente übergeben.

Below ist der Code in der app.component.ts, in der ich addItem () auf dem Knopfklick aufrufe.

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

In der Methode addItem () füge ich meiner Ansicht dynamisch meine Widget-Komponente hinzu. Die Komponente wird gut hinzugefügt. Das Problem ist jedoch, wie die Farbeigenschaft beim dynamischen Hinzufügen übergeben wird. Basierend auf der Farbe, die ich beim Erstellen des Widgets übergebe, möchte ich, dass es in Rot oder Grün usw. angezeigt wir

Hier ist ein Teil des Codes:

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";
    }
}

Im obigen Code gebe ich meine Farbe an die übergeordnete app.component.ts aus, aber da ich die Widget-Komponente dynamisch hinzugefügt habe, weiß ich nicht, wo ich diesen Code hinzufügen soll (Änderungen) = "onChange ($ event)". Ich habe versucht, diesen Code wie folgt in das div einzufügen:

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

Aber es funktioniert nicht