时间戳

首页 > 解决方案 > Angular 组件上的两个 ngcontent

angular - Angular 组件上的两个 ngcontent

问题描述

我创建了一个 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>

标签： angularangular6angular2-templateangular7

解决方案

更新

由于您的 stackblitz 代码，我想我得到了一个正确的想法。

它可以通过带有 ng-content translusion 的 CSS 样式来解决。这是带有样式属性的 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>

这种方法我觉得还不错。

推荐阅读