2

我正在尝试使用角度材料将组件（动态创建）附加到各个选项卡，@viewChild但只有当我单击第二个选项卡中的按钮时，它才会进入第一个选项卡。

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

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

有人可以帮我弄清楚如何做到这一点吗？

4

4 回答 4

3

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

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

于 2019-11-27T06:21:46.950 回答
3

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

于 2019-11-27T06:19:02.920 回答
1

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

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

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

于 2019-11-27T06:16:27.400 回答
0

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

进口

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>

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

于 2019-11-27T05:55:33.270 回答