动态Angular组件中的导入模块和调用方法

Question

我创建了一个Angular 7动态组件，该组件使用Angular材质MatDialog来调用另一个组件。这给了我模块'class_2'导入的意外值'MatDialog'。请添加一个@NgModule批注。但是，如果我不添加MatDialog，则会得到：无法解析class_1的所有参数：（？）。

请帮助。谢谢。

动态组件创建：

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

constructor(private _compiler: Compiler,
            private _injector: Injector,
            private _m: NgModuleRef<any>) {
}

ngAfterViewInit() {
  const template = '<span (click)="openDialog()">Click Here</span>';

  const tmpCmp = Component({template: template})(class {
    constructor(private _dialog: MatDialog) {}

    openDialog() {
      this._dialog.open(AnotherComponent, {});
    }
  });

  const tmpModule = NgModule({
    imports: [CommonModule, MatDialog],
    declarations: [tmpCmp],
  })(class {
  });

  this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = this.vc.createComponent(f);
      cmpRef.instance.name = 'dynamic';
    })
}

Answer 1

您是否应该在MatDialogModule NgModule数组中导入imports？