在ngIf内部动态添加组件 [英] Add component dynamically inside an ngIf

问题描述

我有一些代码可以动态地向页面之一添加/删除组件.这似乎工作正常，我基于Rob Wormald的出色 Ng2高级对话.

I have some code that dynamically adds/removes components to one of my pages. That seems to work fine and I based the method on Rob Wormald's awesome Ng2 Advanced Talk.

以这种标准方式做事看起来像这样:

Doing things in that standard way looks like this:

@Component({
    template: `
    <parent-component>
       <template #dyn_target></template>
    </parent-component>
    `
 })
 export class MyComp {
     @ViewChild('dyn_target', {read: ViewContainerRef}) myTarget;

     constructor(protected cfr: ComponentFactoryResolver) {}

     ngOnInit(): void {
        const factory = this.cfr.resolveComponentFactory(DynComp);
        const compRef = this.myTarget.createComponent(factory);
     }
 }

万事如意，事事如意.但是现在我的问题是，如果组件的目标位置是本身在* ngIf内的元素，我该怎么做?我有知道* ngIf应该何时显示新元素的代码，但是我不知道如何在* ngIf中查找目标的ViewContainerRef.

Everything is happy and works. But now my question is how do I do something like this if the target location for the component is an element that is itself inside an *ngIf? I have code that knows when the *ngIf should be showing the new elements, but I don't know how to lookup the ViewContainerRef for the target inside of the *ngIf.

@Component({
    template: `
    <parent-component>
       <other-comp></other-comp>
       <div *ngIf="showMe"
           <nested-comp>
              <template #dyn_target></template>
           </nested-comp>
       </div>

    </parent-component>
    `
 })
 export class MyComp {
     @ViewChild('dyn_target', {read: ViewContainerRef}) myTarget;
     showMe: boolean = false;

     constructor(protected cfr: ComponentFactoryResolver) {}

     addDynComponent(): void {
        // Q: how do I do this?           vv
        const target: ViewContainerRef = lookup('dyn_target');
        const factory = this.cfr.resolveComponentFactory(DynComp);
        const compRef = target.createComponent(factory);
     }
 }

我曾考虑过尝试删除ngIf并使整个代码块动态化，但这对于我的情况并没有真正起作用，因为大多数内容都是静态的，当/ngIf为true.

I thought about trying to remove the ngIf and make the entire block dynamic, but that doesn't really work for my case because most of the content is static, there is just one subcomponent that needs to be added when/if the ngIf is true.

有人知道如何在ngIf将其他元素添加到DOM之后即时找到ViewContainerRef吗?

Anyone know how to find a ViewContainerRef on the fly after the ngIf adds the other elements to the DOM?

注意:我想到的另一种方法是添加一个新的组件类型，该组件类型仅基于组件类类型的输入显示嵌套的组件.我已经看到了针对Ionic 2所做的那种事情，它可能对我而言有效，但似乎有点过头了.像这样:

Note: another way I thought about doing this is to add a new component type that just shows a nested component based upon an input of a component class type. I have seen that type of thing done for Ionic 2 and it would probably work in my case but seems like overkill. So something like:

@Component({
    template: `
    <parent-component>
       <other-comp></other-comp>
       <div *ngIf="showMe"
           <nested-comp>
              <show-comp [compClass]="dynClass"></show-comp>
           </nested-comp>
       </div>

    </parent-component>
    `
 })
 export class MyComp {
     dynClass: any;
     showMe: boolean = false;

     addDynComponent(): void {
        dynClass = DynComp;
     }
 }

推荐答案

我认为这应该有效

@ViewChildren('dyn_target', {read: ViewContainerRef}) myTarget:QueryList<ViewContainerRef>;

ngAfterViewInit() {
  this.myTarget.changes.subscribe(changes => {
    if(this.myTarget.toArray().length) {
      // myTarget ViewContainerRef available
    }
  });
}

这篇关于在ngIf内部动态添加组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！