动态创建带有 ng-content 的 angular2 组件 [英] Creating an angular2 component with ng-content dynamically
问题描述
我想在使用 ComponentFactoryResolver
动态实例化组件时设置
的主体.
我看到我可以访问输入 &使用 ComponentRef
输出,但不是设置
的方法.
请注意<ng-content>
我打算设置可以包含简单的文本/可以跨动态创建的组件
@Component({选择器:应用程序组件到项目",模板:`<ng-content></ng-content>`})导出类 ComponentToProject 实现 AfterContentInit {ngAfterContentInit() {//我们将对这里的内容做一些重要的事情}}@指示({选择器:'appProjectionMarker'})导出类 ProjectionMarkerDirective 实现 OnInit {构造函数(私有 viewContainerRef:ViewContainerRef,私有 componentFactoryResolver:ComponentFactoryResolver){}ngOnInit() {const componentFactory: ComponentFactory= this.componentFactoryResolver.resolveComponentFactory(ComponentToProject);const componentRef: ComponentRef= this.viewContainerRef.createComponent(componentFactory);//问题:如何在调用 child 的 afterContentInit 之前设置内容}}@成分({选择器:'appTestComponent',模板:`<div appProjectionMarker></div>`})导出类 TestComponent {}
vcRef.createComponent
方法有 projectableNodes
参数
createComponent(componentFactory: ComponentFactory, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef): ComponentRef;
您可以使用它来动态地将一个组件注入到另一个组件中.
假设我们有以下组件
@Component({选择器:'卡',模板:`<div class="card__top"><h2>动态创建具有 ng-content 的 angular2 组件</h2>
<div class="card__body"><ng-content></ng-content>
<div class="card__bottom"><ng-content></ng-content>
`})导出类 CardComponent {}
我们想动态创建它并在它的 ng-content
位置插入一些控件.可以这样做:
const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);让 bodyRef = this.vcRef.createComponent(bodyFactory);让footerRef = this.vcRef.createComponent(footerFactory);const cardFactory = this.cfr.resolveComponentFactory(CardComponent);const cardRef = this.vcRef.createComponent(卡厂,0,不明确的,[[bodyRef.location.nativeElement],[footerRef.location.nativeElement]]);
另见
I would like to set the body of <ng-content>
while instantiating a component dynamically using ComponentFactoryResolver
.
I see that I can get access to input & output using ComponentRef
, but not a way to set <ng-content>
.
Please note <ng-content>
I'm planning on setting can contain simple text/can span dynamically created components
@Component({
selector: 'app-component-to-project',
template: `<ng-content></ng-content>`
})
export class ComponentToProject implements AfterContentInit {
ngAfterContentInit() {
// We will do something important with content here
}
}
@Directive({
selector: 'appProjectionMarker'
})
export class ProjectionMarkerDirective implements OnInit {
constructor(private viewContainerRef: ViewContainerRef, private componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
const componentFactory: ComponentFactory<ComponentToProject> = this.componentFactoryResolver.resolveComponentFactory(ComponentToProject);
const componentRef: ComponentRef<ComponentToProject> = this.viewContainerRef.createComponent(componentFactory);
// Question: How to set content before the child's afterContentInit is invoked
}
}
@Component({
selector: 'appTestComponent',
template: `<div appProjectionMarker></div>`
})
export class TestComponent {}
There is the projectableNodes
parameter for the vcRef.createComponent
method
createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;
You can use it to dynamically inject one component into another.
Let's say we have the following component
@Component({
selector: 'card',
template: `
<div class="card__top">
<h2>Creating a angular2 component with ng-content dynamically</h2>
</div>
<div class="card__body">
<ng-content></ng-content>
</div>
<div class="card__bottom">
<ng-content></ng-content>
</div>
`
})
export class CardComponent {}
We want to create it dynamically and insert some controls to its ng-content
locations. It could be done like follows:
const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);
const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);
let bodyRef = this.vcRef.createComponent(bodyFactory);
let footerRef = this.vcRef.createComponent(footerFactory);
const cardFactory = this.cfr.resolveComponentFactory(CardComponent);
const cardRef = this.vcRef.createComponent(
cardFactory,
0,
undefined,
[
[bodyRef.location.nativeElement],
[footerRef.location.nativeElement]
]
);
See also
这篇关于动态创建带有 ng-content 的 angular2 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!