Question

我正在制作一个非常简单的选项卡视图（想要自定义某项，因为稍后将对其进行大量修改），但是停留了一个基本步骤，即呈现子选项卡。

我的标签视图模板（标签容器）是：

  <div class="card info-panel">
    <div class="card-header">
      <h4>{{ title }}</h4>
      <ul class="nav nav-tabs card-header-tabs">
        <li *ngFor="let tab of tabs; index as i; first as isFirst" class="nav-item">
          <a [ngClass]="{'nav-link': true, 'active':isFirst}" id="tab-{{i}}" href="#">{{tab.label | translate}}</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <div class="tab-content" id="myTabContent">
        <div *ngFor="let tab of tabs; index as i; first as isFirst" [ngClass]="{'tab-pane': true, 'active': isFirst}" id="tab-{{i}}" role="tabpanel">
          tab content goes here.. {{tab}} 
          <!-- this is where im trying to get the tab to render, using the object instance "tab" is a <app-tab> component -->
        </div>
      </div>
    </div>
  </div>

制表符很简单：

<div>
    <ng-content></ng-content>
</div>

我如何使用标签：

<app-tab-view title="My Tabs">
    <app-tab label="General">this is the content for the general tab </app-tab>
    <app-tab label="Other">this is the content for the other tab </app-tab>
</app-tab-view>

显然{{tab}}并不是渲染子标签的正确方法，但是我该如何渲染这些子标签？我希望包装每个子标签，因此我不只是在标签视图模板中使用

如何在Angular6中渲染@ContentChildren实体

0 个答案: