角度:ViewContainer不会在锚元素附近插入组件，而是嵌套在组件本身内 [英] Angular: ViewContainer isn't inserting component adjacent to anchor element, but nesting within the component itself

问题描述

我创建了一个具有以下结构的标签视图:

I have created a tab view, with the following structure:

<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>

我创建了每个组件:tabs，tab和将组件放置在ng-content中.地方.问题是，当我在ViewContainer的末尾插入时(它使用ul作为锚元素)，顺序制表符像这样嵌套在选项卡中:

I create each component: tabs,tab,and the component placed in the ng-content. place. The issue is when I insert at the end of the ViewContainer(it uses ul as it's anchor element) the sequential tabs are nest inside of the tab like this:

<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插入时，不会发生怪异的嵌套，但是选项卡的插入顺序与创建时所用的顺序相反，这会导致稍后在我的应用程序中出现问题.

It is fancy trick, but not helpful. When I insert at position 0 this weird nesting doesn't occur, but the tabs are inserted in opposite order than they were created which causes me issues later in my app.

使用其可投影节点创建选项卡的代码如下:

The code that creates the tab with its projectable node looks like this:

// 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作为锚元素来插入下一个选项卡.

I feel the issue is probably in how I am creating the ng-content(projectable nodes). Unfortunately, I am unaware why the viewContainer appears to be using the tab's ng-content as the anchor element to insert the next tab.

非常感谢对ViewContainer有更好理解的人告诉我为什么可能会发生这种情况.这是我的样本 app 演示了此嵌套行为.

I would really appreciate someone with better understanding of viewContainer to tell me why this might be occurring. Here is my sample app demonstrating this nesting behavior.

推荐答案

使用此代码在应用组件选择器的位置插入element的兄弟姐妹. 在您的组件中:

Use this code to insert siblings of element where you apply selector of component. At your component:

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 [父HTML元素]的createEmbeddedView函数.如果您想为父级提供选择器标签中的html，请在子级模板内部使用.

The natural behavior of using child selector is to insert the code of child template html inside the selector tags which are used in parent component. So we have to use createEmbeddedView function of ViewContainerRef [ Parent HTML Element]. If you want to provide some html with in selector tag fro parent to child then use inside child template.

这篇关于角度:ViewContainer不会在锚元素附近插入组件，而是嵌套在组件本身内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！