angular 将组件附加到相应的选项卡

Question

我正在尝试使用 angular material 和 @viewChild 将组件（动态创建）附加到相应的选项卡，但只有当我单击第二个选项卡中的按钮时它才会转到第一个选项卡。

这里是Stackblitz - angular-append-component-to-respective-tabs

它没有显示在单独的选项卡中。我有 3 个标签。所有 3 个选项卡都包含 Add 按钮，当我单击第一个选项卡的按钮时，它会在第一个选项卡中添加该组件，但是当我单击第二个选项卡的 Add 按钮时，它只会在第一个选项卡中添加该组件，它应该添加到第二个选项卡中。

有人可以帮我弄清楚该怎么做吗？

Answer 1

使用 PrimeNg ang angular 选项卡组件在每个选项卡上加载三个组件。

进口

import { TabViewModule } from 'primeng/tabview';
import { TabMenuModule } from 'primeng/tabmenu';

html

<tabs id="tabId" #tabsInfo class="tabBorder" style="display: block;">
   <tab id="tab1" tabTitle="Tab1">
       <tab1Componentselector></tab1Componentselector>
   </tab>
   <tab id="tab2" tabTitle="Tab2">
       <tab2Componentselector></tab2Componentselector>
   </tab>
   <tab id="tab3" tabTitle="Tab3">
       <tab3Componentselector></tab3Componentselector>
   </tab>
</tabs>

创建三个组件并在所有组件中添加添加按钮。

Answer 2

您实施的 target 属性始终指向第一个选项卡内的 div。这就是组件总是在那里创建的原因。

您可以使用 ViewChildren 从所有选项卡访问 div 来解决这个问题。当用户点击追加按钮时，只需将选项卡索引传递给事件处理函数并在正确的选项卡内创建组件。

示例：https://stackblitz.com/edit/angular-append-component-to-respective-tabs-jp5zzt-aqwxh7

Answer 3

您可以使用 ViewChildren 而不是 ViewChild。
@ViewChildren('appenHere', {read : ViewContainerRef}) tabList: QueryList<ViewContainerRef>;
所以你可以这样使用它：
this.componentRef = this.tabList.toArray()[1].createComponent(childComponent);
您还可以将索引作为参数传递给 addNewComponent 函数。

Answer 4

这里有一个工作示例https://stackblitz.com/edit/angular-append-component-to-respective-tabs-jp5zzt-p7nonq

使用 ViewChild，您始终可以访问第一个。使用 ViewChildren 并通过 selectedIndex

访问

angular 将组件附加到相应的选项卡

angular append component to respective tabs

angular

components

angular7

viewchild

angular-dynamic-components