在动态编译的组件中,必须将不同模块中的组件加入到模块中。您可以使用NgModule的imports属性来实现这一点。下面是一个示例:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { DynamicComponent } from './dynamic.component';
import { OtherModule } from './other.module';
@NgModule({
imports: [
BrowserModule,
FormsModule,
OtherModule // 加载其他模块
],
declarations: [
AppComponent,
DynamicComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
在这个示例中,我们加载了一个名为“OtherModule”的模块,并将其添加到NgModule的imports数组中。然后,在NgModule的declarations数组中添加了一个动态组件,其中包含了来自“OtherModule”的组件。
当我们在动态编译的组件中引用这个NgModule时,我们也可以使用来自“OtherModule”的组件了:
import { NgModule, Compiler, Component, Input, NgModuleRef, OnInit } from '@angular/core';
@Component({
selector: 'dynamic-comp',
template: ` `
})
export class DynamicComponent implements OnInit{
@Input() module: NgModuleRef;
@Input() selector: string;
constructor(private compiler: Compiler) {}
ngOnInit() {
const factory = this.compiler.compileModuleAndAllComponentsSync(this.module);
const compFactory = factory.componentFactories.find(x => x.selector === this.selector);
if (compFactory) {
const component = compFactory.create(this.injector);
this.container.insert(component.hostView);
}
}
}
在这个示例中,我们使用Angular Compiler来编译包含在模块中的组件。然后我们可以通过selector属性指定要渲染的组件。这样,我们就可以在动态编译的
上一篇:不同模块的结构体初始化器