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

问题是您是否正在将模块导入组件。您需要将tell导入MatTabsModule，并将其作为提供商包含在内。只要您的App模块中声明了AppModule，这将有效。

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

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

Answer 2

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

Answer 3

对我来说，我将MatTabsModule添加到了exports数组中，而不是imports了。

无法使用素材标签

3 个答案: