版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaoruda/article/details/88764590
动态创建组件
通常来说组件不需要动态来创建，因为直接在模板中使用可以满足大部分的需求。可是如果有这样的需求
模板中存在多个组件是否显示依赖特定的条件，那么就需要定义多个bool类型的变量来控制，而且还需要考虑bool类型变量
的修改，这样操作起来比较繁琐。这个时候可以考虑使用动态创建组件的方式。大致流程如下所示。
创建组件
@Component({
template: `<span>hello world</span>`
})
export class DynamicComponent { }
创建容器组件
@Component({
selector: 'app-container',
template: `
<div #dynamicContainer></div>
<button (click)="createComponent()">Create</button>
`
})
export class AppContainerComponent {
@ViewChild("dynamicContainer", { read: ViewContainerRef }) container: ViewContainerRef;
}
在AppContainerComponent组件中，通过@ViewChild装饰器来获取视图中的模板元素，如果没有指定第二个查询参数，则默认返回
组件实例或相应的DOM元素，但这个示例中，我们需要获取ViewContainerRef实例也就是视图容器。可以在视图容器中创建、插入、删除组件等。
动态创建组件
在创建组件之前，需要注入ComponentFactoryResolver服务对象，该服务是动态加载组件的核心，可以将一个组件实例呈现到另一个
组件视图上。
- 使用ComponentFactoryResolve将已声明但未实例化的组件解析成为可以动态加载的component
//依赖组件类型获取对应的factory，从名字上可以看出该factory是用来初始化组件的
const componentFactory = this.ComponentFactoryResolver(DynamicComponent);
//调用视图容器的createComponent方法并将组件添加到容器上。该方法内部会调用factory的create方法来初始化组件。
const modalContainerRef = this.container.createComponent(componentFactory);
为组件属性赋值
通过如下的方式为组件属性进行赋值
modalContainerRef.instance.property = ***;
销毁组件
在使用组件后，记得要销毁组件。
modalContainerRef.destroy();
组件注册
为了能够动态创建组件需要将组件在模块的entryComponents中声明。因为在entryComponents中声明的组件Angular都会创建一个
ComponentFactory并将其存储在ComponentFactoryResolver中，这是动态加载必需的步骤。