关于angular5：\\’mat-toolbar \\’不是一个已知元素-Angular 5


'mat-toolbar' is not a known element - Angular 5

我创建了一个新项目，并且尝试添加angular-material。

我在app文件夹中创建了material.module.ts：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { NgModule } from '@angular/core';

import {
    MatButtonModule,
    MatMenuModule,
    MatIconModule,
    MatCardModule,
    MatSidenavModule,
    MatFormFieldModule,
    MatInputModule,
    MatTooltipModule,
    MatToolbarModule
} from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule,
    ],
    exports: [
        MatButtonModule,
        MatMenuModule,
        MatIconModule,
        MatCardModule,
        MatSidenavModule,
        MatFormFieldModule,
        MatInputModule,
        MatTooltipModule,
        MatToolbarModule
    ]
})
export class MaterialModule { }

，并且我已将其导入到我的组件之一中：

1
import { MaterialModule } from '../material.module';

此外，我在index.html

中设置了角形材质

1
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

在我的style.css

中

1
@import '~@angular/material/prebuilt-themes/pink-bluegrey.css';

我知道它正在工作，因为我已经显示了material-icon作为测试：

1
<i class="material-icons">face

但是当我尝试创建页脚时，它失败并显示以下消息：

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

相关讨论

那是因为您必须将模块导入包含组件声明的模块，而不是组件本身：

app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
import { MaterialModule } from './material.module';

@NgModule({
  imports: [
    // ...
    MaterialModule
  ],
  declarations: [
    MyCoolComponent,
    // ...
  ]
})

P.S。使用材质图标的正确方法是使用MatIcon组件。用法示例：

1
<mat-icon>home</mat-icon>

最佳方法
快速修复

1
import {MatToolbarModule} from '@angular/material/toolbar';

在您的app.module.ts

中

然后在您的声明中声明MatToolbarModule []。

在这里适合我：https：//stackblitz.com/edit/angular-w9ckf8

查看链接，查看是否缺少任何内容。

相关讨论