Angular 组件上的两个 ngcontent

Question

我创建了一个 Tabs 组件（https://stackblitz.com/edit/angulartabs），使用如下：

<tabs>
  <tab title="tab 1">Content 1</tab>
  <tab title="tab 2" active="true">Content 2</tab>
</tabs>

选项卡组件HTML如下：

<div class="head">
  <ul class="tabs">
    <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
      <a>{{ tab.title }}</a>
    </li>
  </ul>
  <div class="toolbar">Toolbar</div>
</div>
<ng-content></ng-content>

这是可行的，但我还需要工具栏标记在所选选项卡更改时更改。

因此，我需要为每个选项卡定义其内容和工具栏。

如何做到这一点？

更新

也许使用标签时的 HTML 标记应该是：

<tabs>
  <tab title="tab 1">
    <toolbar>Tab 1 toolbar</toolbar>
    Content 1
  </tab>
  <tab title="tab 2" active="true">
    Content 2
  </tab>
</tabs>

选项卡 2 中没有工具栏，这也是一个选项...

内容是否也需要包裹在标签中？

  <tab title="tab 1">
    <toolbar>Tab 1 toolbar</toolbar>
    <content>Content 1</content>
  </tab>

Answer 1

更新

多亏了你的 stackblitz 代码，我想我的想法是正确的。

可以通过 CSS 样式与 ng-content 转换来解决。这里有 HTML 个带有样式属性的代码。

app.component.html:

<tabs>
  <tab title="tab 1">
    Content 1
    <div class="toolbar">Toolbar 1</div>
  </tab>
  <tab title="tab 2" active="true">
    Content 2
    <div class="toolbar">Toolbar 2</div>
  </tab>
</tabs>

tabs.component.html:

<div style="position: relative">
  <div class="head">
    <ul class="tabs">
      <li *ngFor="let tab of tabs" (click)="select(tab)" class="tab" [class.active]="tab.active">
        <a>{{ tab.title }}</a>
      </li>
    </ul>
  </div>
  <ng-content></ng-content>
</div>

tab.component.html:

<div *ngIf="active" style="position: absolute; right: 0; top: 0">
  <ng-content select=".toolbar"></ng-content>
</div>
<div [hidden]="!active" class="pane">
  <ng-content></ng-content>
</div>

这个方法我觉得还不错

Angular 组件上的两个 ngcontent

Two ngcontent on a Angular component

angular2-template

angular

angular6

angular7