Angular动态创建组件-新闻详情

Angular动态创建组件


发布时间:2019-03-01责任编辑:满帅 浏览:2578


Angular 中放置组件的地方称为 container 容器。在 exe-app 组件中创建一个模板元素,使用模板变量的语法,声明一个模板变量。模板元素 <ng-template> 将会作为组件容器,

1.png

AppComponent 组件中,通过 ViewChild 装饰器来获取视图中的模板元素,如果没有指定第二个查询参数,则默认返回的组件实例或相应的 DOM 元素,但这个示例中,需要获取 ViewContainerRef 实例。ViewContainerRef 用于表示一个视图容器,可添加一个或多个视图。通过 ViewContainerRef 实例,可以基于 TemplateRef 实例创建内嵌视图,并能指定内嵌视图的插入位置,也可以方便对视图容器中已有的视图进行管理。简而言之,ViewContainerRef 的主要作用是创建和管理内嵌视图或组件视图。

2.png

在测试的时候可以创建按钮进行相应的操作

3.png

定义 createComponent() 方法前,我们需要注入 ComponentFactoryResolver 服务对象。该 ComponentFactoryResolver 服务对象中,提供了一个很重要的方法 - resolveComponentFactory() ,该方法接收一个组件类作为参数,并返回 ComponentFactory 

定义 createComponent() 方法前,我们需要注入 ComponentFactoryResolver 服务对象。该 ComponentFactoryResolver 服务对象中,提供了一个很重要的方法 - resolveComponentFactory() ,该方法接收一个组件类作为参数,并返回 ComponentFactory 

constructor(private resolver: ComponentFactoryResolver) {}

我们知道可以通过调用 ComponentFactory 实例的 create() 方法,来创建组件。介绍完上面的知识,我们来实现 AppComponent 组件的 createComponent() 方法:

同时需要将动态组件添加到 NgModule entryComponents 属性中:


项目开发组   供稿