使用Module中的compileModuleAndAllComponentsSync动态创建组件

时间:2017-08-08 11:38:09

标签: angular dynamic

我正在尝试动态导入模块中的组件,而不显式导入所有组件。 该模块由两个子模块组成,每个子模块内部都有一个组件。

我不清楚如何从compileModuleAndAllComponentsSync(ExampleModule)获得的工厂列表中创建组件 这是我的代码:

app.component.html

<ng-container *ngComponentOutlet="myComponent;
                                    ngModuleFactory: myModule;">
</ng-container>

app.component.ts

import { Component, Compiler } from '@angular/core';
import { ExampleModule } from '@example/example.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  private myModule: any;
  private myComponent: any;

  constructor(private compiler: Compiler) {
    const componentList = this.compiler.compileModuleAndAllComponentsSync(ExampleModule);
    // const componentList = this.compiler.compileModuleSync(ExampleModule);
    console.log(componentList);

    this.myModule = null; //<-- What goes here...
    this.myComponent = null; //<--...and here?
  }
}

app.module.ts

 import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';

    import { AppComponent } from './app.component';
    import { ExampleModule } from '@example/example.module';


    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        ExampleModule

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如何从我的模块动态创建组件?

0 个答案:

没有答案