另一个 ng 模板中的 Angular 4 ng 模板不起作用

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>

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

Answer 1

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

这意味着您在组件类中具有templateref变量。因此，您应该使用ngtemplateoutlet在此容器中使用ng-container，而不是使用ng-template。

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