Angular2: Zwei-Wege-Daten auf Komponente Bindung dynamisch DynamicComponentLoader mit eingefügt

Question

ich eine Angular2 App entwickle, und ich stand vor dem Problem:

Ich habe eine Reihe von verschiedenen Objekten, die unter Verwendung von UI ausgewählt werden kann. Jedes dieser Objekte verfügt über eine Reihe von Optionen (für verschiedene Objekte unterschiedlich), die mithilfe der Benutzeroberfläche bearbeitet werden können. Jetzt verwende ich DynamicComponentLoader, um eine spezifische Komponente für das aktuell ausgewählte Objekt einzufügen, damit es seine Optionen korrekt verarbeiten kann. Das Problem ist, dass ich nicht weiß, wie Daten des aktuell ausgewählten Objekts an eine dynamisch eingefügte Optionskomponente gebunden werden.

@Component({ 
    selector: 'dynamic', 
    template: `<div>Options:</div> 
      <div>Property1: <input type="number" /></div> 
      <div>Property2: <input type="text" /></div>` 
    // template: `<div>Options:</div> 
    //   <div>Property1: <input type="number" [(ng-model)]="currentSelection.property1" /></div> 
    //   <div>Property2: <input type="text" [(ng-model)]="currentSelection.property1" /></div>` 
}) 
class DynamicComponent { 

} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Selected: {{currentSelection.name}}!</h2> 
     <div #container></div> 
    </div> 
    ` 
}) 
class App { 
    currentSelection = {name: 'Selection1', property1: 10, property2: 'test'}; 

    constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) { 
    loader.loadIntoLocation(DynamicComponent, elementRef, 'container'); 
    } 
} 

Here ist ein Plunker Sie verstehen, meine Frage zu helfen:

Answer 1

Mit angular2 und Rxjs "Observables" ist die Antwort fast immer.

Wenn ich Ihr Problem richtig verstanden hat, müssen Sie Ihre Dynamic ein „Observer“ und Ihren Container „ein Observable oder noch besser ein Subject (Wenn Ihr Behälter in einem anderen beobachtbaren abonnieren muss eine Auswahl aus empfangen)“ machen. Dann, nachdem Sie Ihre dynamische Komponente geladen haben, abonnieren Sie sie für Ihren Container.

Wenn sich die Auswahl auf Ihrem Container ändert, übertragen Sie die neue Auswahl an Ihre Abonnenten. Auf diese Weise können Sie mehrere dynamische Komponenten laden und alle erhalten Ihre Pushs.

Der Container:

class App { 
    currentSelection = {}; 
    selections = [ 
    {name: 'Selection1', property1: 10, property2: 'test'}, 
    {name: 'Selection2', property1: 20, property2: 'test2'} 
    ]; 
    subject:Subject<any> = new Subject(); 

    constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) { 
    } 

    ngOnInit(){ 
    this.loader.loadIntoLocation(DynamicComponent, this.elementRef, 'container', this.injector) 
    .then(compRef =>this.subject.subscribe(compRef.instance)); 
    // subscribe after loading the dynamicComponent 
    } 

    // set the new selection and push it to subscribers 
    changeSelection(newSelection){ 
    this.currentSelection = newSelection; 
    this.subject.next(this.currentSelection); 
    } 
} 

The Observer:

class DynamicComponent implements Observer{ 
    public currentSelection = {}; 

    next(newSelection){ 
    this.currentSelection = newSelection; 
    } 
} 

Hier ist Ihre plunker arbeiten nach meinen Bearbeitungen "sofern ich die Einfuhren in dem neuesten Winkel beta.6 geändert"

Ich weiß, das ist eine ziemlich alte Frage. Aber hoffentlich wird jemand von dieser Antwort profitieren.

Answer 2

Hier ist, was Sie tun können, bewegen Sie Ihren Code von constructor zu ngOnInit und verwenden Sie Versprechen für die Zuweisung dynamischer Wert.

ngOnInit(){ 
    this.dynamicComponentLoader.loadIntoLocation(DynamicComponent, this.elementRef,'container').then((component)=>{ 
     component.instance.currentSelection = currentSelection; 
    }); 
}