如何使用mat-tab？ mat-tab is not a known element 错误

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

我遇到错误

Uncaught Error: Template parse errors:
'mat-tab' is not a known element:
1. If 'mat-tab' is an Angular component, then verify that it is part of this module.
2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</ngx-tabset> -->

Answer 1

在您的 module.ts 文件中添加导入并将其添加到导入中（如果您使用多个 module.ts 文件，请将其添加到负责您的组件的文件中）。

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

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

export class AppModule {}

Answer 2

我遇到了同样的问题。我收到错误 'mat-tab' is not a known element 即使在导入两个模块后
我的解决方法是
npm install --save @angular/cdk @angular/material

Answer 3

对于 Angular 9+:

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

在app.module.ts

Answer 4

对我来说，当 CDK 和 Material 是同一版本时，我遇到的问题较少：

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

Answer 5

None of these solutions worked for me

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

就我而言，我尝试在子模块中使用 mat-tab。这意味着像@shildmaiden 在他上面的解决方案中建议的那样将导入添加到 AppModule 对我不起作用，所以我只是在我的 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 6

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

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

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

export class AppModule {}

如何使用mat-tab？ mat-tab is not a known element 错误

How to use mat-tab? mat-tab is not a known element error

typescript

angular-material

angular

mat-tab

None of these solutions worked for me