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

Question

我正在使用 Angular ng-tabset 来呈现一些选项卡。我的 ngb-tab 看起来有点像：

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

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

标签： angularangular-directiveng-templateng-containerngbtab

Answer 1

我建议不要嵌套 ng-templates 并将它们与不同的 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>