angular4 动态创建组件 vs 动态创建模板
实现
模拟场景:页面上"帮助"按钮的点击触发帮助文档的弹出框,且每个页面的帮助文档不一样
因此弹出框里的帮助文档是一个动态模板而不是动态组件
以下comp均代表Type类型的动态组件,即 comp:Type<any>
//xx.component.ts export class xxComponent implements Oninit{
constructor(private helpingService:HelpingService){ }
fireClick($event:any){//按钮的点击事件
this.helpingService.changeHelpContent(comp);
}
}
//helping.service.ts
@Injectable()
export class HelpingService{
helpChangeEvent:EventEmitter<comp>;
constractor(){
this.helpChangeEvent=new EventEmitter<comp>()
}
public changeHelpContent(comp){
this.helpChangeEvent.emit(comp)//发射helpChangeEvent事件
}
}
//helping.component.ts @component({
selector: 'helping',
templateUrl: './helping.component.html',
styleUrls: ['./helping.component.scss']
}) @ViewChild('con',{read:ViewContainerRef})
conRef:ViewContainerRef; export class HelpingComponent implements OnInit{
constractor(private helpingService:HelpingService,
private factoryResolver: ComponentFactoryResolver,){
this.helpingService.helpchangeEvent.subscribe((comp)=>{//接收helpChangeEvent事件
this.loadComponent(comp)
})
}
private loadComponent(comp){
this.conRef.clear();//删除之前的视图
let factory=this.factoryResolver.resolveComponentFactory(comp);//factory创建组件的实例
this.conRef.createComponent(factory)
}
}
动态创建组件的相关知识点
1.TemplateRef
通过TemplateRef实例,可以创建内嵌视图Embedded Views
涉及对象和相关方法:
1.crateEbeddedView:创建内嵌视图
@Component({
selector:'helping',
template:`//创建组件,那组件内容就是固定的
<template #tpl>
<span>i am a span in Template {{name}}</span>
</template>
`
})
export class helpingComponent{
@ViewChild('tpl')
tpl:TemplateRef<any>; name:string='Artimis'; ngAfterViewInit(){
let view=this.tpl.createEmbeddedView(null);
let commentEle=this.tpl.elementRef.nativeElement;
view.rootNodes.forEach((node)=>{//没有ViewContainerRef,只能手动把元素塞到视图里
commentEle.parentNode.insertBefore(node,commentEle.nextSibling)
})
}
}
2.VIiewContainerRef
视图容器,是管理创建好的内嵌视图或组件视图
通过ViewContainerRef实例,基于TemplateRef + createEmbeddedView创建内嵌视图
@Component({
selector:'helping',
template:`
<template #tpl>
<span>i am a span in Template {{name}}</span>
</template>
`
})
export class helpingComponent{
@ViewChild('tpl')
tpl:TemplateRef<any>; @ViewChild('tpl',{read:ViewContainerRef})
tplVcRef:ViewContainerRef; name:string='Artimis'; ngAfterViewInit(){
//有ViewContainerRef,直接通过createEmbeddedView方法塞进视图
this.tplVcRef.createEmbeddedView(this.tplRef)
}
动态创建模板的相关知识点
1.ComponentFactoryResolver
通过ViewContainerRef实例,基于ComponentFactoryResolver + createComponent 创建模板视图
涉及对象和相关方法:
1. ComponentFactoryResolver:一个服务对象(需要注入)
2. resolveComponentFactory:ComponentFactoryResolver的方法,接收一个组件类作为参数,返回一个ComponentFactory实例
3.createComponent:ViewContainerRef的方法,内部会调用ComponentFactory实例的create方法创建对应组件,并将组件添加到容器内
export abstract class ComponentFactoryResolver{
static NULL:ComponentFactoryResolver=new _NullComponentFactoryResolver();
abstract resolverComponentFactory<T>(component:Type<T>):ComponentFactory<T>
}
@Component({
selector:'helping',
template:`//创建模板,那模板的内容就不是固定的
<ng-container #con></ng-container>
`
})
export class helpingComponent{ @ViewChild('con',{read:ViewContainerRef})
conRef:ViewContainerRef; constractor(private factoryResolver: ComponentFactoryResolver,
private helpingService: HelpingService){
this.helpingService.manualChange.subscribe((comp)=>{
this.loadComp(comp);
}) private loadComp(comp){
this.conRef.clear();//删除之前的视图
let factory=this.factoryResolver.resolveComponentFactory(comp);//factory是一个如何创建组件的实例
this.conRef.createComponent(factory)
}
}
angular4 动态创建组件 vs 动态创建模板的更多相关文章
- Java 动态编译组件 & 类动态加载
1.JDK6 动态编译组件 Java SE 6 之后自身集成了运行时编译的组件:javax.tools,存放在 tools.jar 包里,可以实现 Java 源代码编译,帮助扩展静态应用程序.该包中提 ...
- Delphi 动态创建组件,单个创建、单个销毁
效果图如下: 实现部分代码如下: var rec: Integer = 0; //记录增行按钮点击次数 implementation {$R *.dfm} //动态释放单个组件内存,即销毁组件 pro ...
- vue 动态创建组件(运行时创建组件)
function mountCmp (cmp, props, parent) { if (cmp.default) { cmp = cmp.default } cmp = Vue.extend(cmp ...
- Angular 创建组件
创建组件 0 命令创建 1 创建组件 定义hello.component.ts组件 在app.module.ts中引用并添加到declarations声明中 在app.component.html中使 ...
- ionic小白的学习路之目录结构分析、创建组件、创建页面、页面跳转
一. 目录结构分析 hooks:编译cordova 时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中. node_modules :node 各类依赖包. resources :andro ...
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- 动态创建组件TEdit
//动态创建组件TEdit procedure TForm1.FormMouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftSt ...
- Delphi动态创建组件,并释放内存
开发所用delphi版本是xe2,效果图如下: 代码如下: ---------------------------------------------------------------------- ...
- Qt Quick 组件和动态创建的对象具体的解释
在<Qt Quick 事件处理之信号与槽>一文中介绍自己定义信号时,举了一个简单的样例.定义了一个颜色选择组件,当用户在组建内点击鼠标时,该组件会发出一个携带颜色值的信号,当时我使用 Co ...
随机推荐
- re模块补充
)# 后面加数字代表前面多少个进行替换print(ret8) # stars466c7#7.subn() 会返回替换了多少次ret9=re.subn('\d','asd','sh8sd6sds7smm ...
- index方法用于数据集的强制索引操作
index方法为3.2.3版本新增,用于数据集的强制索引操作,例如: $Model->index('user')->select(); 对查询强制使用user索引,user必须是数据表实际 ...
- 2019/10/24 CSP-S 模拟
T1 tom 题意: 考虑一定是属于\(a\)的在一坨,属于\(b\)的在一坨,找到这条连接\(a\)和\(b\)的边,然后分别直接按\(dfs\)序染色即可 注意属于\(a\)的连通块或属于\(b\ ...
- Object.keys()应用
<script type="text/javascript"> var person={ firstName:"David", lastName:& ...
- Git从fork分支开始的过程整理
文章适用于团队合作的时候多个人向一个repo贡献,整理了Git从fork分支开始的过程. 1. Fork 在github上你要贡献的repo(eg.http://github/remote/test. ...
- System.Web.Mvc.ViewResult.cs
ylbtech-System.Web.Mvc.ViewResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicK ...
- PAT甲级——A1001A+BFormat
Calculate a+b and output the sum in standard format -- that is, the digits must be separated into gr ...
- Python学习day39-并发编程(各种锁)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- Python-pip更改国内源
windows方式: 1.打开任意文件夹,在上方地址栏中输入%appdata% 2.在此目录里新建文件夹pip 3.在pip文件夹里新建文件名:pip.ini 4.把以下内容复制到pip.ini中,保 ...
- 04-2-object类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...