1

我创建了一个选项卡视图，其结构如下：

<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 有更好理解的人告诉我为什么会发生这种情况。这是我演示此嵌套行为 的示例应用程序。

4

1 回答 1

4

使用此代码在您应用组件选择器的位置插入元素的兄弟姐妹。在您的组件中：

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

在构造函数 

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

在课堂上

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

在模板

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

使用子选择器的自然行为是将子模板 html 的代码插入到父组件中使用的选择器标签中。所以我们必须使用 ViewContainerRef [ Parent HTML Element] 的 createEmbeddedView 函数。如果您想在父子模板之间提供一些带有 in 选择器标签的 html，请使用 inside child 模板。

于 2017-12-07T13:01:15.340 回答