Angular Вкладки - Используйте только один компонент

Question

Я новичок в angular и мне нужно создать несколько вкладок. Я нашел очень интересный пример, но я не могу реализовать все в одном и том же компоненте и без шаблона компонента вкладки.

Есть ли способ передать весь контент из вкладки компонента в приложение компонента?

DEMO

Я намерен передать этот код (компонент табуляции) в компонент приложения, и весь код html в шаблоне будет перенесен в приложение. компонент. 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)
  }
}

Answer 1

Попробуйте использовать более простые и гибкие angular -таблицы. https://www.npmjs.com/package/@codehint-ng / Вкладки

Answer 2

Если вы хотите скопировать весь контент в компонент приложения sh, замените входную переменную локальной переменной.

Шаблон компонента приложения:

<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>

I Вы изменили Stackblitz для удаления компонента табуляции.