javascript - 无法使用 Material 选项卡

Question

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

我按照建议添加了导入，但它不起作用。我发现: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 在您的应用程序模块中声明，这就会起作用。

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

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