我尝试将这两个选项卡放入两个单独的组件中，如下所示:

<mat-tab-group animationDuration="0ms">
    <mat-tab app-tab [label]="'blabla1'" [data]="aaaData"></mat-tab>
    <mat-tab app-tab [label]="'blabla2'" [data]="bbbData"></mat-tab>
</mat-tab-group>

...

@Component({
    selector: 'mat-tab[app-tab]',
    templateUrl: './tab.component.html',
    styleUrls: ['./tab.component.scss']
})
export class TabComponent {
    @Input() label: string;
    @Input() data: any;

在 module.ts 中:

import {MatTabsModule} from '@angular/material';
@NgModule({
    imports: [
        MatTabsModule,

我得到了错误:

Uncaught Error: Template parse errors: More than one component matched on this element. Make sure that only one component's selector can match a given element. Conflicting components: MatTab,TabComponent ("

或者，如果我使用 a mat-tab-link 而不是 mat-tab，并且 a[mat-tab-link][app-tab ] 而不是 mat-tab[app-tab]，我会得到

Uncaught Error: Template parse errors: Can't bind to 'data' since it isn't a known property of 'a'. ("mat-tab-group animationDuration="0ms">

而且它也不支持 label 属性:

Uncaught Error: Template parse errors: Can't bind to 'label' since it isn't a known property of 'a'. ("s="tabs-wrap">][label]="'blabla1'" [data]="aaaData">

最佳答案

我会在 mat-tab 中放置另一个元素，以避免混淆 Material 的组件选择器。

更像是:

<mat-tab-group animationDuration="0ms">
    <mat-tab label="blabla1">
        <tab-component [data]="aaaData"></tab-component>
    </mat-tab>
    <mat-tab label="blabla2">
        <tab-component [data]="bbbData"></tab-component>
    </mat-tab>
</mat-tab-group>

@Component({
    selector: 'tab-component',
    templateUrl: './tab.component.html',
    styleUrls: ['./tab.component.scss']
})
export class TabComponent {
    @Input() data: any;

https://stackoverflow.com/questions/61087440/