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

对于Angular 9 +：

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

在app.module.ts

中

Answer 3

我有同样的问题。即使导入了两个模块，我也遇到错误 'mat-tab'不是已知元素 对我来说是
npm install --save @angular/cdk @angular/material

Answer 4

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

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

Answer 5

这些解决方案都不适合我

请记住，@ 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.ts'

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

export class AppModule {}

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

6 个答案:

这些解决方案都不适合我