使用 ng-content 动态创建 angular2 组件

Posted 2023-03-13

【中文标题】使用 ng-content 动态创建 angular2 组件

【英文标题】：Creating an angular2 component with ng-content dynamically

【发布时间】：2017-11-01 05:09:00

【问题描述】：

我想在使用ComponentFactoryResolver 动态实例化组件时设置<ng-content> 的主体。

我发现我可以使用ComponentRef 访问输入和输出，但不能设置<ng-content>。

请注意<ng-content>我打算设置可以包含简单的文本/可以跨越动态创建的组件

@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 

【问题讨论】：

使用projectableNodes参数***.com/questions/41372334/…

我可以添加一个动态组件作为projectableNodes，这样子指令的父级可以使用@ContentChild吗？

既然是projectableNodes，我假设我只能通过DOM元素

不，您可以将组件注入其中或模板。但是你应该只操作节点

见20.00youtube.com/watch?v=EMjTp12VbQ8

【参考方案1】：

vcRef.createComponent 方法有 projectableNodes 参数

createComponent<C>(componentFactory: ComponentFactory<C>, index?: number, injector?: Injector, projectableNodes?: any[][], ngModule?: NgModuleRef<any>): ComponentRef<C>;

您可以使用它来将一个组件动态注入到另一个组件中。

假设我们有以下组件

@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 

我们希望动态创建它并在其ng-content 位置插入一些控件。可以这样做：

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

另见

Why is projectableNodes an any[][]?

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

【讨论】：

在这种情况下你事先知道有两个ng-content，如果对象是动态传递的，你怎么知道有多少呢？我的意思是，如果 CardComponent 可以是任何组件？

我刚刚发现如何使用ComponentFactory.ngContentSelectors 知道投影的数量，所以在本例中为 cardFactory.ngContentSelectors.length