kittencup / angular2-ama-cn

angular2 随便问
691 stars 101 forks source link

关于动态创建组件 #236

Open lengsehuoyan opened 7 years ago

lengsehuoyan commented 7 years ago

我有一个这样的需求 比如我有已经实现好的组件... 然后我现在希望实现一个这样的组件 组件通过 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 创建的组件没办法插入到具体位置。 还请老师傅给指个路

WingGao commented 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)
  }