动态创建组件
通常来说组件不需要动态来创建,因为直接在模板中使用可以满足大部分的需求。可是如果有这样的需求
模板中存在多个组件是否显示依赖特定的条件,那么就需要定义多个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实例也就是视图容器。可以在视图容器中创建、插入、删除组