javascript - 在 angular2 final 中加载动态创建的动态组件

Question

以前使用 DynamicComponentLoader 我可以这样写:

import {Directive, Component, ViewContainerRef, DynamicComponentLoader} from '@angular/core';

@Directive({
  selector: '[some-directive]'
})
export class SomeDirective {
  costructor(dcl: DynamicComponentLoader, viewContainerRef: ViewContainerRef) {
    // fetch template from the server
    fetch(...).then((template) => {
      @Component({
        selector: 'div[some-relatively-unique-attribute-name]',
        template: template
      })
      class AdHocComponent {}

      dcl.loadNextToLocation(AdHocComponent, viewContainerRef).then(() => {
        console.log('success');
      });
    });
  }
}

现在使用 angular2 final 和 NgModules 我看到这样的例子:http://plnkr.co/edit/P0spNzu8JbQad2aKACsX?p=info

(在这里讨论 https://github.com/angular/angular/issues/10735 )

要动态加载一个 HelloComponent，但需要在创建根 NgModule 时预先声明 HelloComponent。

如何将临时创建的组件加载到我的 View 中？

我找到了这个:http://plnkr.co/edit/wh4VJG?p=preview但要完成这样一个简单的任务，大量的代码是不对的。

Answer 1

这可能就是您正在寻找的:

export class App {
   @ViewChild('placeholder', {read: ViewContainerRef}) viewContainerRef;

  constructor(private compiler: Compiler) {}

  addItem () {
     @NgModule({declarations: [HelloComponent]})
    class DynamicModule {}

    this.compiler.compileModuleAndAllComponentsAsync(DynamicModule)
      .then(({moduleFactory, componentFactories}) => {
        const compFactory = componentFactories
           .find(x => x.componentType === HelloComponent);
        const cmpRef = this.viewContainerRef.createComponent(compFactory, 0);
      });
  }
}

另见直播 Plunker

相关问题:

• Angular2 RC6 - Dynamically load component from module