Угловая 2 динамическая двусторонняя привязка

Question

Я пытаюсь создать компонент, который динамически добавляет другой компонент. В качестве примера вот мой родительский класс:

import { Component, ComponentRef, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'; 

@Component({ 
    templateUrl: './app/sample-component.component.html', 
    selector: 'sample-component' 
}) 
export class SampleComponent { 

    @ViewChild('dynamicContent', { read: ViewContainerRef }) 
    protected dynamicComponentTarget: ViewContainerRef; 
    private currentComponent: ComponentRef<any>; 
    private selectedValue: any; 

    constructor(private componentResolver: ComponentFactoryResolver) { 

    } 

    private appendComponent(componentType: any) { 
     var factory = this.componentResolver.resolveComponentFactory(componentType); 
     this.currentComponent = this.dynamicComponentTarget.createComponent(factory); 
    } 
} 

sample-component.component.html:

<div #dynamicContent></div> 

Он отлично работает с добавлением элемента, но я понятия не имею о том, как связать двухстороннюю динамически, как я делаю в статические компоненты: [(ngModel)]="selectedValue"

Answer 1

Связывание с динамически добавленными компонентами не поддерживается.

Вы можете использовать общий сервис для общения с динамически добавляемых компонентов (https://angular.io/docs/ts/latest/cookbook/component-communication.html)
или вы можете прочитать/установить императивно с помощью this.currentComponent ссылка:

private appendComponent(componentType: any) { 
    var factory = this.componentResolver.resolveComponentFactory(componentType); 
    this.currentComponent = this.dynamicComponentTarget.createComponent(factory); 
    this.currentComponent.instance.value = this.selectedValue; 
    this.currentComponent.instance.valueChange.subscribe(val => this.selectedValue = val); 
}