<强>动态创建组件
这篇文章我们将介绍在角中如何动态创建组件。
<强>定义AlertComponent组件
首先,我们需要定义一个组件。
exe-alert.component.ts
从“进口输入}{组件,@angular/核心”;
@ component ({
选择器:“exe-alert”,
模板:
& lt; h2>警报{{类型}}& lt;/h2>
`，
})
出口类AlertComponent {
@Input()类型:字符串=俺晒Α?
}
之前
上面代码中,我们定义了一个简单的<代码>警报> 类型,用于让用户自定义提示的类型。我们的自定义组件最终是一个实际的DOM元素,因此如果我们需要在页面中插入该元素,我们就需要考虑在哪里放置该元素。
<>强创建组件容器
在角中放置组件的地方称为容器<代码> 容器。接下来,我们将在<代码> exe-app> & lt; ng-template>
app.component.ts
从“@angular进口{组件}/核心”;
@ component ({
选择器:“exe-app”,
模板:
& lt; ng-template # alertContainer> & lt;/ng-template>
”
})
出口类AppComponent {}
之前
友情提示:容器可以是任意的DOM元素或组件。
在AppComponent组件中,我们可以通过<代码> ViewChild 装饰器来获取视图中的模板元素,如果没有指定第二个查询参数,则默认返回的组件实例或相应的DOM元素,但这个示例中,我们需要获取<代码> ViewContainerRef 实例。
ViewContainerRef用于表示一个视图容器,可添加一个或多个视图。通过ViewContainerRef实例,我们可以基于TemplateRef实例创建内嵌视图,并能指定内嵌视图的插入位置,也可以方便对视图容器中已有的视图进行管理。简而言之,ViewContainerRef的主要作用是创建和管理内嵌视图或组件视图。
根据以上需求,更新后的代码如下:
从“进口{组件、ViewChild ViewContainerRef} @angular/核心”;
@ component ({
选择器:“exe-app”,
模板:
& lt; ng-template # alertContainer> & lt;/ng-template>
”
})
出口类AppComponent {
@ViewChild (“alertContainer”{写道:ViewContainerRef})容器:ViewContainerRef;
}
之前
<强>动态创建组件
接下来,在AppComponent组件中,我们来添加两个按钮,用于创建AlertComponent组件。
从“进口{组件、ViewChild ViewContainerRef} @angular/核心”;
@ component ({
选择器:“exe-app”,
模板:
& lt; ng-template # alertContainer> & lt;/ng-template>
& lt;按钮(点击)=" createComponent(‘成功’)”在创建成功alert
& lt;按钮(点击)=" createComponent(‘危险’)”在创建危险alert
”
})
出口类AppComponent {
@ViewChild (“alertContainer”{写道:ViewContainerRef})容器:ViewContainerRef;
}
之前
在我们定义<代码> createComponent() 方法前,我们需要注入<代码> ComponentFactoryResolver 服务对象。该<代码> ComponentFactoryResolver 服务对象中,提供了一个很重要的方法<代码>——resolveComponentFactory() ,该方法接收一个组件类作为参数,并返回<代码> ComponentFactory>
ComponentFactoryResolver抽象类:
出口抽象类ComponentFactoryResolver {
静态零:ComponentFactoryResolver=new _NullComponentFactoryResolver ();
文摘resolveComponentFactory(组件:Type;
}
在AppComponent组件构造函数中,注入ComponentFactoryResolver服务:
构造函数(私人解析器:ComponentFactoryResolver) {}
接下来我们再来看一下ComponentFactory抽象类:
出口抽象类ComponentFactory{
抽象得到选择器():字符串;
抽象得到组件类型():Type;//选择器对所有& lt; ng-content>元素成分。
抽象得到ngContentSelectors (): string [];//组件的输入。
抽象得到的输入():{propName:字符串,templateName:字符串}[];//组件的输出。
抽象得到输出():{propName:字符串,templateName:字符串}[];//创建一个新的组件。
摘要创建(
喷油器:注射器,projectableNodes& # 63;:任何[][],rootSelectorOrNode& # 63;:字符串|任何,
ngModule& # 63;: NgModuleRef
