在本文中，我们将学习动态创建组件。您可能需要在各种场景中动态加载组件，例如想要显示弹出模式等。
让我们假设，我们有一个组件如下所示，我们将动态加载。
从 “@ angular/core” 导入 { Component，Input}； @ Component({'app-message' 选择器，模板: '<h2 >{{ message }}</h2>' })导出类MessageComponent {@ Input() message: string;}
要动态加载MessageComponent，您需要一个容器。假设我们要在AppComponent中加载MessageComponent。我们在AppComponent中需要一个容器元素。
AppComponent的模板如下:
< div style = "text-align: center" >< h1 >欢迎来到 {title }}</ h1 >< 模板 # messagecontainer ></ 模板 ></ div >
如您所见，我们有一个入口点模板或容器模板，我们将在其中动态加载MessageComponent。
在AppComponent中，我们需要导入以下内容:
- ViewChild、ViewContainerRef和ComponentFactoryResolver来自 @ angular/core
- ComponentRef和ComponentFactory来自 @ angular/core
- MessageComponent来自m message.com组件
导入所需的东西后，AppComponnet将如下所示:
导入 {组件，ViewChild,ViewContainerRef,ComponentFactoryResolver,组件，ComponentFactory“@ angular/core' 中的 }；从 “./message.com组件” 导入 { MessageComponent}； @ Component({'app-root' 选择器，templateUrl: './app.component.html'})AppComponent导出类 {title = 'app';}
我们可以访问模板作为组件类中的ViewChild。模板是一个容器，我们希望在其中动态加载组件。因此，我们必须以ViewConatinerRef的身份访问temple。
ViewContainerRef表示可以附加一个或多个视图的容器。这可以包含两种类型的视图。
- 主机视图
- 嵌入式视图
主机视图是通过使用createComponent实例化组件来创建的，嵌入式视图是通过使用createEmbeddedView实例化嵌入式模板来创建的。我们将使用主机视图来动态加载MessageComponent。
让我们创建一个名为entry的变量，它将引用模板元素。此外，我们已将ComponentFactoryResolver服务注入到component类中，这些服务将需要动态加载组件。
AppComponent导出类 {title = 'app';@ ViewChild( 'messagecontainer' ，{read: ViewContainerRef }) 条目: ViewContainerRef；构造函数 (私有解析器: ComponentFactoryResolver) { }}
请记住，作为模板元素引用的输入变量具有用于创建组件，销毁组件等的API。
现在要创建组件，让我们创建一个函数。在函数内部，我们需要执行以下任务，
- 清除容器
- 为MessageComponent创建工厂
- 创建组件使用工厂
- 传递 @ Input属性的值使用组件引用实例方法
将所有内容放在一起，createComponent函数将如下所示:
createComponent (消息) {这个 .entry.clear();const工厂 = 这个。resolver.resolveComponentFactory(MessageComponent);const componentRef = 这个。entry.createComponent (工厂)；componentRef.instance.message = 消息；}
我们可以在按钮的click事件上调用createComponent函数。让我们在模板中放置两个按钮，并在单击按钮时调用createComponent函数。
< div style = "text-align: center" >< h1 >欢迎来到 {title }}</ h1 >< 按钮 (单击) = "createComponent('Welcome Foo ! ')" 欢迎 > </ 按钮 >< 按钮 (单击) = "createComponent('Foo Again？')" 不受欢迎 < </ 按钮 >< br />< 模板 # messagecontainer ></ 模板 ></ div >
在输出中，您可以看到组件在单击按钮时动态加载。
当你点击按钮组件将重新加载不同的消息。可以使用componentRef上的destroy方法销毁组件。
destroyComponent() {这个 .componentRef.de stroy();}
您可以通过手动调用函数来销毁动态加载的组件，或者将其放入组件的ngOnDestroy() 生命周期钩子中，这样当主机组件被自动销毁时，动态加载的组件也会销毁。
将所有内容放在一起， AppComponent将如下所示:
导入 {组件，ViewChild,ViewContainerRef,ComponentFactoryResolver,组件，ComponentFactory“@ angular/core' 中的 }；从 “./message.com组件” 导入 { MessageComponent}； @ Component({'app-root' 选择器，templateUrl: './app.component.html'})AppComponent导出类 {title = 'app';componentRef: 任何； @ ViewChild( 'messagecontainer' ，{read: ViewContainerRef }) 条目: ViewContainerRef；构造函数 (私有解析器: ComponentFactoryResolver) { } createComponent (消息) {这个 .entry.clear();const工厂 = 这个。resolver.resolveComponentFactory(MessageComponent);这个 .componentRef = 此。entry.createComponent (工厂)；这个 .componentRef.instance.message = 消息；}destroyComponent() {这个 .componentRef.de stroy();}}
此时，在运行应用程序时，您将收到一个错误，因为我们尚未在AppModule中设置entryComponents。我们可以设置如下所示:
从 “./app.com组件” 导入 { AppComponent}；从 “./message.com组件” 导入 { MessageComponent}； @ NgModule({声明: [AppComponent, MessageComponent],进口: [浏览器模块],供应商: []，bootstrap: [AppComponent],entryComponents: [MessageComponent]})导出AppModule类 { }
这就是在Angular中动态加载组件所需要做的。
喜欢这篇文章吗？
你有它!如果你喜欢这篇文章，请喜欢它并分享它。此外，如果你还没有退房为Angular点燃UI,一定要这样做!他们有50个基于材质的Angular组件，可以帮助您更快地编写快速的web应用程序。
</p