是否可以在 angular 2 中手动实例化组件
Is it possible to manually instantiate component in angular 2
在angular2中,是否可以手动实例化一个组件A,然后传来传去,在组件B的模板中渲染?
是的,支持。您需要一个 ViewComponentRef
,例如可以通过将其注入构造函数或使用 @ViewChild('targetname')
查询来获取,以及一个也可以注入的 ComponentResolver
。
来自 的代码示例允许使用 *ngFor
动态添加组件
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
在angular2中,是否可以手动实例化一个组件A,然后传来传去,在组件B的模板中渲染?
是的,支持。您需要一个 ViewComponentRef
,例如可以通过将其注入构造函数或使用 @ViewChild('targetname')
查询来获取,以及一个也可以注入的 ComponentResolver
。
来自 *ngFor
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}