我正在尝试构建一个动态附加另一个组件的组件.这里的例子是我的父类:
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);
}
}
Run Code Online (Sandbox Code Playgroud)
sample-component.component.html:
<div #dynamicContent></div>
Run Code Online (Sandbox Code Playgroud)
它可以附加一个元素,但我不知道如何动态绑定双向,就像我在静态组件中一样: [(ngModel)]="selectedValue"