时间戳

首页 > 解决方案 > 带有材料设计垫工具栏问题的Angular 6

angular - 带有材料设计垫工具栏问题的Angular 6

问题描述

我正在用 Angular 6 和材料制作一个小教程。我的代码：

HTML：

<mat-toolbar>
  <span>Angular 6 Mean Stack Sample</span>
</mat-toolbar>

<div>
  <router-outlet></router-outlet>
</div>

应用模块.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ListComponent } from './components/list/list.component';
import { CreateComponent } from './components/create/create.component';
import { EditComponent } from './components/edit/edit.component';

@NgModule({
  declarations: [
    AppComponent,
    ListComponent,
    CreateComponent,
    EditComponent,
    MatToolbarModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在 html 部分中，我从 ide 收到此错误：

ng: 'mat-toolbar' 不是已知元素：如果 'mat-toolbar' 是 Angular 组件，则验证它是否是该模块的一部分。

当我启动程序时，一切正常，但我的屏幕上什么也没有。来自网络控制台的错误是：

错误：模块“AppModule”声明的意外模块“MatToolbarModule”。请添加@Pipe/@Directive/@Component 注解。

我重新安装了所有东西，从头开始项目，但没有任何帮助。如果有人可以帮助我，我会很棒，

谢谢你，

汤姆

标签： angularangular-material

解决方案

将模块从数组移动MatToolbarModule到数组。只能在声明 as 的地方导入。importsdeclarationsModulescomponents

imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    BrowserAnimationsModule
  ]

推荐阅读