mat-tab不是已知的元素错误

Question

我正在尝试使用mat-tab.我在html中添加了以下代码

<mat-tab-group>
    <mat-tab label="Tab 1"> <app-latest-article></app-latest-article></mat-tab>
    <mat-tab label="Tab 2">  <app-trending-article></app-trending-article> </mat-tab>
</mat-tab-group>

在ts文件中

import {MatTabsModule} from '@angular/material/tabs';

我收到了错误

<mat-tab-group>
    <mat-tab label="Tab 1"> <app-latest-article></app-latest-article></mat-tab>
    <mat-tab label="Tab 2">  <app-trending-article></app-trending-article> </mat-tab>
</mat-tab-group>

Answer 1

在module.ts文件中添加导入并将其添加到导入(如果使用多个module.ts文件,请将其添加到负责组件的文件中).

import { MatTabsModule } from '@angular/material';

@NgModule({
  imports: [
    ...
    MatTabsModule,
    ...
  ],
  declarations: [
    ...
  ],
  providers: []
})

export class AppModule {}

Answer 2

对于 Angular 9+：

从'@angular/material/tabs' 导入 { MatTabsModule };

在 app.module.ts

Answer 3

我遇到过同样的问题。即使在导入两个模块后，我也收到错误“mat-tab”不是已知元素
对我的修复是
npm install --save @angular/cdk @angular/material

Answer 4

这些解决方案都不适合我

请记住，@shildmaiden 的解决方案是最准确的解决方案。我们的场景略有不同。

就我而言，我尝试mat-tab在子模块中使用。这意味着将导入添加到AppModule@shildmaiden 在他的上述解决方案中建议的内容对我来说不起作用，所以我只是在我的mySubModuleName.module.ts文件中实现了他的解决方案，然后它就工作得很好。

确保Angular 9+使用此示例，除非其他答案也进行了相应编辑：

// Rather use this line:
import { MatTabsModule } from '@angular/material/tabs';
// Instead of this line:
// import { MatTabsModule } from '@angular/material';


@NgModule({
  imports: [
    ...
    MatTabsModule,
    ...
  ],
  declarations: [
    ...
  ],
  providers: []
})

export class MySubModuleName {}

Answer 5

如果使用选项卡组的页面不在 app.module.ts 的声明中，您会收到相同的错误。除了将 MatTabsModule 添加到导入之外，还将您的页面添加到声明中：

import { MatTabsModule } from '@angular/material';
import { YourPage } from './yourpage.component'

@NgModule({
  imports: [
    ...
    MatTabsModule,
    ...
  ],
  declarations: [
    YourPage
  ],
  providers: []
})

export class AppModule {}