Question

我使用DynamicComponentLoader动态加载组件，该组件由参数传递。我想使用旧的loadIntoLocation方法，但从beta16开始就已删除（我使用RC0）。

最后，我希望能够在#activeComponent div中加载一个组件，同时仍能切换父项可见性，如下所示：

<div *ngIf="isOpen>
  <div #activeComponent></div>
</div>

这就是我得到的：

@Input() activeComponent: any;
constructor(){}
ngOnChanges() {
  this._dynamicComponentLoader.loadNextToLocation(this.activeComponent, this._viewContainerRef);
}

这样可行，但是，正如方法的名称所暗示的那样，组件作为兄弟加载到 next 到位置。我想要一个孩子，就像旧的loadIntoLocation方法一样。

Angular 2 beta16 changelog写道：使用@ViewChild（'myVar'，读取：ViewContainerRef）来获取具有变量myVar的元素的ViewContainerRef。然后调用DynamicComponentLoader.loadNextToLocation。

这就是我想要的工作：

@ViewChild('activeComponent',) child: ViewContainerRef;
constructor(){}
ngOnChanges() {
    if (!this.activeComponent) return;
    this._dynamicComponentLoader.loadNextToLocation(this.activeComponent, this.child);

}

但我得到了：TypeError: location.createComponent is not a function。

_dynamicComponentLoader @ViewChild工作的任何人？

Answer 1

类似的问题：Adding new Component element to DOM in Angular 2 at runtime doesn't render the component

以下是plunker的链接：Plunker

 @Component({
      selector: 'my-app',
      template: `<button (click)="addCmp()" #activeComponent>add</button>
      <hero-list></hero-list>
      <sales-tax></sales-tax>
      `,
      directives: [HeroListComponent, SalesTaxComponent]
    })
    export class AppComponent {
      @ViewChild('activeComponent',{read: ViewContainerRef}) activeComponent: ViewContainerRef;

      constructor(private dcl: DynamicComponentLoader, injector: Injector,private resolver: ComponentResolver) {}

      addCmp(){
        console.log('adding');
        //change HeroListComponent with the one you want
        this.resolver.resolveComponent(HeroListComponent).then((factory:ComponentFactory<any>) => {
              this.cmpRef = this.activeComponent.createComponent(factory)
            });
          }

如何在@ViewChild中使用nAngular2 DynamicComponentLoader

1 个答案: