angular - 如何使用 mat-tab？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' 不是已知元素：
1. 如果 'mat-tab' 是 Angular 组件，则验证它是否是此模块的一部分。
2. 如果“mat-tab”是一个 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。("
</ngx-tabset> -->

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' is not a known element
对我的修复是
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 {}

Answer 6

在我看来，当 CDK 和 Material 是相同的版本时，我遇到的问题更少：

"@angular/cdk": "^8.2.3"
"@angular/material": "^8.2.3"