Angular: ViewContainer 不是插入与锚元素相邻的组件，而是嵌套在组件本身内

Question

我创建了一个标签视图，结构如下：

<tabs>
        <ul #getVCRefHERE >
            <li>tab1</li>
            <li>tab2</li>
        </ul>

        <tab>
            <ng-content></ng-content> <!--screen for tab2 -->
        </tab>
        <tab>
            <ng-content></ng-content> <!--content for tab1 -->
        </tab>
</tabs>

我创建了每个组件：选项卡、选项卡和放置在 ng-content 中的组件。地方。问题是当我在 ViewContainer 的末尾插入时（它使用 ul 作为锚元素），顺序选项卡嵌套在选项卡内部，如下所示：

<tabs>
            <ul #postionVCRef>
                <li>tab1</li>
                <li>tab2</li>
            </ul>

            <tab>
                <ng-content></ng-content> <!--screen for tab1 -->
                <tab>
                    <ng-content></ng-content> <!--content for tab2 -->
                </tab>
            </tab>

    </tabs>

这是花哨的技巧，但没有帮助。当我在位置 0 插入时，不会发生这种奇怪的嵌套，但选项卡的插入顺序与创建时的顺序相反，这导致我稍后在我的应用程序中出现问题。

创建带有可投影节点的选项卡的代码如下所示：

// Tab == SubContainer,  Tabs == Container
    makeComp(component: Type<DynamicComponent>){
        let compFactory =this.compFR.resolveComponentFactory(component);
        let compRef = this.viewContainer.createComponent(compFactory);

        let length =this.viewContainer.length - 1;
        console.log(length)
        let subFactory = this.compFR.resolveComponentFactory(SubContainer); 
        let subRef = this.viewContainer.createComponent(subFactory,length,undefined,[[compRef.location.nativeElement]]);
        subRef.instance.title = compRef.instance.name;
        this.subList.push(subRef.instance);

      }

我觉得问题可能在于我如何创建 ng-content（可投影节点）。不幸的是，我不知道为什么 viewContainer 似乎使用选项卡的 ng-content 作为锚元素来插入下一个选项卡。

非常感谢对 viewContainer 有更好理解的人告诉我为什么会发生这种情况。这是我的示例 app，演示了这种嵌套行为。

Answer 1

使用此代码在应用组件选择器的位置插入元素的同级元素。在您的组件中：

import { HostListener,ComponentRef,EventEmitter,OnInit,ElementRef, Injectable ,Component,Input,Output,ViewContainerRef,ViewChild  } from '@angular/core';

在构造函数处

    constructor(private _vcr: ViewContainerRef,private _eref: ElementRef) {
}

在class

@ViewChild('Date') Date;
ngAfterViewInit() {
       this._vcr.createEmbeddedView(this.Date);  
    }

在模板

<ng-template #Date>
// Your Html
</ng-template>

使用 child 选择器的自然行为是将 child 模板 html 的代码插入 parent 组件中使用的选择器标签内。所以我们必须使用 ViewContainerRef [ Parent HTML Element] 的 createEmbeddedView 函数。如果你想在 parent 到 child 的选择器标签中提供一些 html 然后使用内部 child 模板。

Angular: ViewContainer 不是插入与锚元素相邻的组件，而是嵌套在组件本身内

Angular: ViewContainer isn't inserting component adjacent to anchor element, but nesting within the component itself

tabs

dynamic

transclusion

angular2-ngcontent

angular