Angular 2 dynamische append und onclick

Question

Ich habe drei eckige 2-Komponente.

ModalComponent:

import {Component, DynamicComponentLoader, Injector, ApplicationRef, Input} from 'angular2/core'; 
import {TextContentComponent} from "./contents/text-content.component"; 
import {LinkContentComponent} from "./contents/link.content.component"; 

@Component({ 
    selector: 'js-popup-container', 
    template: ` 
     <style> 
      .display-block { 
       display: block; 
      } 
     </style> 
     <div [ngClass]="'display-block'" id="js-popup-container" class="css-popup-container"> 
      <h1>Select</h1> 
      <select name="selectContent" id="select" #sel (change)="selectedContent(sel.value)"> 
       <option value="one">Picture</option> 
       <option value="two">Link</option> 
       <option value="three">Text</option> 
      </select> 
      <div id="load"> 

      </div> 
      <p>{{value}} error here.</p> 
     </div> 

    `, 
    inputs: ['itemBack'] 
}) 

export class ModalComponent { 
    @Input() itemBack; 
    value = this.itemBack; // Why doesn't it work? 

    constructor(public dcl:DynamicComponentLoader, public injector:Injector, private appRef:ApplicationRef) { 
    } 

    selectedContent(Selected:string) { 
     switch (Selected) { 
      case 'one': 
       break; 
      case 'two': 
       this.loadContent(LinkContentComponent); 
       break; 
      case 'three': 
       this.loadContent(TextContentComponent); 
       break; 
      default: 
     } 
    } 

    loadContent(ComponentType) { 
     this.dcl.loadAsRoot(ComponentType, '#load', this.injector) 
      .then(componentRef => { 
       //componentRef.instance.itemBack = this.itemBack; 
       (<any>this.appRef)._loadComponent(componentRef); 
      }); 
    } 

} 

LinkContentComponent:

import {Component, EventEmitter} from 'angular2/core'; 

@Component({ 
    selector: 'link-content', 
    template: ` 
     <div class="input"> 
      <label for="link-content-text">Link</label> 
      <input type="text" id="link-content-text" [(ngModel)]="item.text"> 
     </div> 
     <a href="#" class="bbk" (click)="contentTextSave()">Save</a> 
    `, 
    outputs: ['itemBack'] 
}) 

export class LinkContentComponent { 
    item = {text: ''}; 
    itemBack = new EventEmitter<{text: string}>(); 
    contentTextSave(){ 
     this.itemBack.emit(this.item); 
    } 
} 

TextContentComponent

import {Component, EventEmitter} from 'angular2/core'; 

@Component({ 
    selector: 'text-content', 
    template: ` 
     <div class="input"> 
      <label for="text-content-text">Text</label> 
      <input type="text" id="text-content-text" [(ngModel)]="item.text"> 
     </div> 
     <a href="#" class="bbk" (click)="contentTextSave()">Save</a> 
    `, 
    outputs: ['itemBack'] 
}) 

export class TextContentComponent { 
    item = {text: ''}; 
    itemBack = new EventEmitter<{text: string}>(); 
    contentTextSave(){ 
     this.itemBack.emit(this.item); 
    } 
} 

Die ModalComponent ist die wichtige Bit der Rest einfach nur da ist, um zu sehen, was in der Komponente ist. Der Code ruft tatsächlich ein Popup-Fenster auf.

Sie können das Problem genau hier sehen: <p>{{value}} error here.</p> - Es zeigt wirklich nichts.

Dies ist, wo es die value: value = this.itemBack; bekommen sollte, die von einem Eingang kommt. Die loadAsRoot lädt die Eingänge wahrscheinlich nicht richtig.

Answer 1

Update

loadContent(ComponentType) { 
    this.dcl.loadAsRoot(ComponentType, '#load', this.injector) 
     .then(componentRef => { 
      //componentRef.instance.itemBack = this.itemBack; 
       componentRef.instance.itemBack.subscribe(value => { 
       this.itemBack = value; 
       }); 
      (<any>this.appRef)._loadComponent(componentRef); 
     }); 
} 

original

@Input() nicht vor ngOnChanges() initialisiert wird, wird das erste Mal aufgerufen. ngOnInit() wird sofort nach ngOnChanges() aufgerufen, wurde das erste Mal aufgerufen und ist normalerweise der richtige Ort für zusätzliche Initialisierung.

ngOnInit() { 
    this.value = this.itemBack; // does work 
} 

Ich weiß, TS nicht sehr gut (ich Dart nur verwenden), aber Code wie

value = this.itemBack; 

ist wahrscheinlich außerhalb des Konstruktors oder einer Methode, weil Code wie dies in TS auch nicht gültig Wird ausgeführt, wenn die Klasseninstanz vor der Ausführung des Konstruktors erstellt wird und this verwendet wird, bevor der Konstruktor normalerweise ungültig ist, da die Klasse noch nicht vollständig erstellt und die Initialisierung noch nicht abgeschlossen wurde.