Angular 4 ng-template 在另一个 ng-template 中不起作用

Question

我正在使用 ng-bootstrap 组件 ngtabset。当我嵌套 ng-templates 时，我在视图中看不到任何东西。有人可以解释为什么以及如何解决它吗？

以下工作并向我展示了两个选项卡，两个选项卡的内容分别可见。

<ngb-tabset>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 1</ng-template>
        <ng-template ngbTabContent>
          This is tab 1 content
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 2</ng-template>
        <ng-template ngbTabContent>
            This is tab 2 content
        </ng-template>
      </ngb-tab>
</ngb-tabset>

以下内容无效，因为我没有看到选项卡 2 中的内容。

<ngb-tabset>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 1</ng-template>
        <ng-template ngbTabContent>
          This is tab 1 content
        </ng-template>
      </ngb-tab>
      <ngb-tab>
        <ng-template ngbTabTitle>Tab 2</ng-template>
        <ng-template ngbTabContent>
            <ng-template>This is tab 2 content</ng-template>
        </ng-template>
      </ngb-tab>
</ngb-tabset>

为什么我需要这样做？我有一个接受 TemplateReference 的自定义组件，它需要显示在选项卡 2 内容中。

Answer 1

如您所说我有一个接受 TemplateReference 的自定义组件

这意味着您的组件中有 TemplateRef 变量 class。因此，您应该使用 ng-container 而不是使用 ng-template，并使用 ngTemplateOutlet 在该容器中投影您的模板。

<ng-template ngbTabContent>
      <ng-container *ngTemplateOutlet="your_template_ref_variable"></ng-container>
</ng-template>

Angular 4 ng-template 在另一个 ng-template 中不起作用

Angular 4 ng-template within another ng-template doesn't work

angular

angular2-template

ng-bootstrap

ng-template