带有材料设计垫工具栏问题的Angular 6 [重复]

Posted 2023-03-13

【中文标题】带有材料设计垫工具栏问题的Angular 6 [重复]

【英文标题】：Angular 6 with material design mat-toolbar problem [duplicate]

【发布时间】：2019-03-06 18:06:53

【问题描述】：

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

html：

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

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

app-module.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 注解。

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

谢谢你，

汤姆

【问题讨论】：

你在declarations中有MatToolbarModule，它应该在imports中，因为它是一个模块。

我的错，看起来我是盲人，我尝试了一切，但这个......谢谢大家的帮助。现在可以了

【参考方案1】：

将模块 MatToolbarModule 从 declarations 数组移动到 imports 数组。 Modules 只能被导入，其中components 被声明。

imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    BrowserAnimationsModule
  ]

【讨论】：

老错误。有时我只见树木不见森林。