如何在 angular 组件中定义完整选项卡？

Question

I want to split a large angular component containing a <mat-tab-group> and several <mat-tab> into:

• a parent component defining the <mat-tab-group>
• children components each defining their own <mat-tab>

The template for the parent looks like:

<mat-tab-group>
  <child-component1></child-component1>
  <child-component2></child-component2>
  <child-component3></child-component3>
</mat-tab-group>

And each child looks like:

<mat-tab>
  ...
</mat-tab>

The children are properly initialized without errors, however they are not rendered to the DOM. It works as expected if I put every <mat-tab> in the parent, and have only the tab content in the children components.

This is not a proper solution to my problem though: given that the children components need to render the tab label, it doesn't seem right to let the parent responsible of that.

My understanding is that a <mat-tab> element must be a direct child of the <mat-tab-group> to be properly rendered and that my <child-component> s prevent that.

What would be the best way to have the <mat-tab> defined in the children components?

Answer 1

You can make tab list base on your ViewModel and then do like this:

 <mat-tab-group [(selectedIndex)]="tabIndex">
    <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab.Title">
      <ng-template mat-tab-label>
        <span> {{tab.Title}}</span>
      </ng-template>
      <dynamic-content [TabComponent]="tab"></dynamic-content>
    </mat-tab>
  </mat-tab-group>

Then call your component base on Tab Item click, In fact use dynamic component.