动态创建带有 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]]);

Plunker 示例

另见

• 为什么projectableNodes是any[][]?>

• Pawel Kozlowski - Angular 2 的反应式育儿 - NG-BE 2016

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]
    ]
);

Plunker Example

See also

• Why is projectableNodes an any[][]?

• Pawel Kozlowski - Reactive parenting with Angular 2 - NG-BE 2016

这篇关于动态创建带有 ng-content 的 angular2 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！