Angular Tabs - 仅使用一个组件答案

【问题标题】：Angular Tabs - Use only one componentAngular Tabs - 仅使用一个组件
【发布时间】：2020-02-24 15:23:31
【问题描述】：

我是 Angular 的初学者，需要创建一些标签。我找到了一个非常有趣的例子，但是我无法在同一个组件中实现所有内容，并且没有选项卡组件模板。

有没有办法将组件标签中的所有内容传递给组件应用程序？

我打算将此代码（标签组件）转移到应用程序组件中，并将模板中的所有 html 代码转移到 app.component.html。有可能实现吗？

谢谢。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'tabs',
  template: `
    <mat-tab-group>
      <ng-container *ngFor="let tab of tabsName">
        <mat-tab label="{{ tab.name }}">
          <ng-container [ngTemplateOutlet]='tab.template'></ng-container>
        </mat-tab>
      </ng-container>
    </mat-tab-group>
    <ng-content></ng-content>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class TabComponent  {
  @Input() tabsName: any;

  onSelect(event){
    console.log(this.tabsName[0].name)
  }
}

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

如果您希望将整个内容复制到应用组件，请将输入变量替换为局部变量。

应用组件模板：

<mat-tab-group>
  <ng-container *ngFor="let tab of allTabs">
    <mat-tab label="{{ tab.name }}">
      <ng-container [ngTemplateOutlet]='tab.template'></ng-container>
    </mat-tab>
  </ng-container>
</mat-tab-group>
<ng-content></ng-content>

<ng-template #Shop>
  <form>
    name: <input type="text">
  </form>
</ng-template>
<ng-template #Notification>
  <h1>list of notification</h1>
</ng-template>
<ng-template #Review>
  <h1>list of review</h1>
</ng-template>

我已修改您的 Stackblitz 以删除标签组件。

【讨论】：

【解决方案2】：

尝试使用更简单灵活的 angular-tabs。 https://www.npmjs.com/package/@codehint-ng/tabs

【讨论】：