Question

我想在页面的顶部或主体元素处实例化组件。如果我使用<new-element>组件viewContainerRef组件<person>添加viewContainerRef.createComponent组件，则会将新创建的元素放在其主机元素之后。

<app>
    <persons>
        <person>host</person>
        <new-element>child</new-element>
    </persons>
</app>

是否有正确的方法可以在<new-element>组件的<app>元素之后创建<person>。

<app>
    <new-element>child</new-element>
    <persons>
        <person>host</person>
    </persons>
</app>

Answer 1

如果可以将目标ViewContainerRef传递到您的person组件，那么它应该有效。您可能希望使用ng-container，除了注释之外，DOM中不会留下任何元素：

export class AppComponent {
    @ViewChild('target', { read: ViewContainerRef }) targetRef: ViewContainerRef;
}

<app>
    <ng-container #target></ng-container>
    <persons>
        <!-- Pass the target in -->
        <person [target]="targetRef">host</person>
    </persons>
</app>

然后在您的person组件中执行：

@Input('target') target: ViewContainerRef;

// ...

this.target.createComponent( ... )

编辑：由于您希望将选择器用作渲染目标，因此您可以创建该组件然后移动它：

viewContainerRef.createComponent( ... ) 

// The new component has been rendered as a sibling, so grab it and move it

document.querySelector('body').appendChild(viewContainerRef.element.nativeElement.nextSibling);

在页面顶部动态创建组件

1 个答案: