首页 文章

'mat-toolbar'不是已知元素 - Angular 5

提问于
浏览 次
9

我创建了一个新项目，我正在尝试添加 angular-material .

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

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 { }

我已将其导入我的一个组件中：

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

此外，我在 index.html 设置了角度材料

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

在我的 style.css

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

我知道这是有效的，因为我已经将 material-icon 作为测试：

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

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

未捕获错误：模板解析错误：'mat-toolbar'不是已知元素：1 . 如果'mat-toolbar'是Angular组件，则验证它是否是此模块的一部分 . 2.如果'mat-toolbar'是Web组件，则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@ NgModule.schemas'以禁止显示此消息 .

angular-material angular5

2 回答

  • 9

    在这里工作正常：https://stackblitz.com/edit/angular-w9ckf8

    查看链接，看看是否有任何遗漏 .

    回复于
  • 3

    那是因为你必须将模块导入到包含组件声明的模块 not 到组件本身：

    app.module.ts

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

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

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

    <mat-icon>home</mat-icon>
    回复于

相关问题