无法使用材质选项卡

Question

我很高兴在 https://material.angular.io/components/tabs/api#MatTab 找到有关材料选项卡的内容，并很高兴在我的项目中使用它。

我按照建议添加了导入，但它不起作用。我找到了：can not find module "@angular/material" 并导入了这些东西，并在我的 maintab 组件上进行了导入。

但是 mat-tab 链接仍然不起作用。所以这是我的 maintab.component.ts

import { Component, OnInit } from '@angular/core';
import {MatTabsModule} from '@angular/material';

@Component({
  selector: 'app-maintab',
  templateUrl: './maintab.component.html',
  styleUrls: ['./maintab.component.css']
})
export class MaintabComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这是我的 maintab.component.html

<mat-tab-group>
  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>
  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>
</mat-tab-group>

我仍然收到这些类型的错误：

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. ("<mat-tab-group>
  [ERROR ->]<mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
"): ng:///AppModule/MaintabComponent.html@1:2
'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. ("
    <p>...</p>
  </mat-tab>

我只是不知道下一步该做什么。

Answer 1

问题是您将模块导入到组件中。您需要将MatTabsModule 导入您的AppModule，并将其作为提供程序包含在内。只要您的 MaintabComponent 在您的 App 模块中声明，它就可以工作。

如果您的MaintabComponent 未在您的AppModule 中声明，您需要导入MatTabsModule 并在声明它的模块中提供而不是AppModule。

（如果您仍然遇到问题，请包含声明此组件的模块代码以获得进一步帮助）

Answer 2

我有同样的问题。我收到错误，因为 MatTabModule 在 node_modules
要解决此问题，请转到命令提示符并键入
npm install --save @angular/cdk @angular/material

Answer 3

对我来说，我将 MatTabsModule 添加到 exports 数组而不是 imports 然后它起作用了。