使用ngTemplateOutlet或其他东西在多个选项卡中重用Angular ngb-tabs的内容

Question

我正在使用Angular ng-tabset来渲染一些选项卡。我的 ngb 标签看起来有点像：

<ngb-tab id="mytabs">
<ng-template ngbTabTitle>
<div data-locator="xxxe">yyy</div>
</ng-template>
<ng-template ngbTabContent>
...
...
...
</ng-template>
</ngb-tab>

这工作正常。但是我在这个模板中还有其他几个选项卡，我希望在其中呈现相同的内容。因此，出于可重用性的目的，我尝试将选项卡的内容分开移动，并在我希望呈现的每个选项卡中使用它的引用。我不知道该怎么做。我尝试将其放入单独的<ng-template>中，如下所示：

<ng-template #testing>
<ng-template ngbTabTitle>
<div data-locator="xxxe">yyy</div>
</ng-template>
<ng-template ngbTabContent>
...
...
...
</ng-template>
<ng-template

在选项卡下，我需要渲染它的地方，我尝试将其称为：

<ngb-tab id="mytabs">
<ng-container *ngTemplateOutlet="testing"></ng-container>    // referring the #testing above
</ngb-tab>
OR:
<ngb-tab id="mytabs">
<ng-template *ngTemplateOutlet="testing"></ng-template>
</ngb-tab>

但是我的选项卡没有呈现。也许是错误的方法，或者我错过了一些东西。是否有可能实现我想要实现的目标？如果是，如何？

Answer 1

我建议不要嵌套 ng 模板并使用不同的 id，然后将它们分别插入 ngb-tab 下，如下所示：

<ng-template ngbTabTitle #testTitle>
<div data-locator="xxxe">yyy</div>
</ng-template>
<ng-template ngbTabContent #testContent>
...
...
...
</ng-template>
<ngb-tab id="mytabs">
<ng-container *ngTemplateOutlet="testTitle"></ng-container>    
<ng-container *ngTemplateOutlet="testContent"></ng-container>
</ngb-tab>

Answer 2

我希望我理解你的问题是正确的。 对于模板的可重用性，您可以创建自己的组件。对于逻辑的可重用性，您可以创建服务。

<ngb-tab id="mytabs">
<ng-template ngbTabTitle>
<my-xyz-comp data-locator="xxxe"></my-xyz-comp>
</ng-template>
<ng-template ngbTabContent>
<my-xyz-comp data-locator="aaaa"></my-xyz-comp>
</ng-template>
</ngb-tab>