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

时间:2017-11-29 14:55:44

标签: angular angular2-template ng-bootstrap ng-template

我正在使用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的自定义组件,需要在tab 2内容中显示。

1 个答案:

答案 0 :(得分:2)

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

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

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