Open lengsehuoyan opened 7 years ago
用ComponentFactoryResolver
@Component({
template: `<div>
<div #myitem></div>
</div>`
})
export class AComponent {
@ViewChild('myitem', {read: ViewContainerRef}) container: ViewContainerRef;
constructor(private componentResolver: ComponentFactoryResolver) {
}
renderSelf() {
let fac = this.componentResolver.resolveComponentFactory(BComponent)
let compRef = fac.create(this.container.injector, null, this.container.element.nativeElement)
}
我有一个这样的需求 比如我有已经实现好的组件...
然后我现在希望实现一个这样的组件
组件通过 input 或者 viewContent 加载一段动态的输入内容
比如
<p>1</p>A<p>2</p>BCBC
然后我希望在组件中替换A -> <a-comp> B -> <b-comp> C -> <c-comp>
替换后渲染为<p>1</p><a-comp></a-comp><p>2</p><b-comp></b-comp><c-comp></c-comp><b-comp></b-comp><c-comp></c-comp>
并且根据某些条件分别设置这些动态创建的组件的input 有啥好办法吗使用viewContainerRef.createComponent 创建的组件没办法插入到具体位置。 还请老师傅给指个路