如何使用材料 2 工具栏答案

【问题标题】：How to use material 2 toolbar如何使用材料 2 工具栏
【发布时间】：2016-12-01 08:52:39
【问题描述】：

我正在使用 material2 卡等，但在尝试添加工具栏时出错

app.component.html

<md-toolbar [color]="red">
  <span>My Application Title</span>
</md-toolbar>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {OVERLAY_PROVIDERS} from "@angular2-material/core";

// Material 2 
import { MdCoreModule } from '@angular2-material/core'
import { MdButtonModule } from '@angular2-material/button';
import { MdCardModule } from '@angular2-material/card';
import { MdRadioModule } from '@angular2-material/radio';
import { MdCheckboxModule } from '@angular2-material/checkbox'
import { MdTooltipModule } from '@angular2-material/tooltip';
import { MdSliderModule } from '@angular2-material/slider';
import { MdToolbarModule,MdToolbarRow } from '@angular2-material/toolbar';


import 'hammerjs' ;

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MdCoreModule.forRoot() , MdCardModule.forRoot() , MdButtonModule.forRoot() , MdRadioModule.forRoot() ,
    MdCheckboxModule.forRoot() , MdTooltipModule.forRoot() , MdSliderModule.forRoot() ,MdToolbarModule.forRoot()
  ],
  providers: [OVERLAY_PROVIDERS],
  bootstrap: [AppComponent]
})
export class AppModule { }

我遇到了错误

zone.js:388Unhandled Promise 拒绝：模板解析错误：不能绑定到“颜色”，因为它不是“md-toolbar”的已知属性。 1. 如果'md-toolbar'是一个Angular组件并且它有'color'输入，那么验证它是这个模块的一部分。 2. 如果 'md-toolbar' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schema' 压制此消息。 ("

][color]="red">我的申请标题 "): AppComponent@39:12 'md-toolbar' 不是已知元素： 1. 如果“md-toolbar”是一个 Angular 组件，那么验证它是这个模块的一部分。 2. 如果 'md-toolbar' 是一个 Web 组件，则将 "CUSTOM_ELEMENTS_SCHEMA" 添加到该组件的 '@NgModule.schema' 压制此消息。 ("

提前致谢

【问题讨论】：

我认为这与您的错误无关，但颜色应该来自“主要”类型 | “口音” | “警告”。 [color]="red" 不是有效值。 color="primary" 是。

标签： angular angular-material2

【解决方案1】：

现在它在 app.compoent.ts 更改后可以工作

    import { MdToolbarModule,MdToolbarRow } from '@angular2-material/toolbar';

  imports: [
    MdToolbarModule.forRoot(),   

  ],

【讨论】：

【解决方案2】：

另外我发现如果遇到md-whatever是未知元素等问题，改成mat-what即可。我发现的例子是 md-toolbar、md-icon 和 md-menu。我不得不将所有这些更改为 mat- 并且它起作用了。我还必须将 mdMenu 更改为 matMenu 和 viola！

【讨论】：

【解决方案3】：

app.module.ts 文件

2 变化

import {MatToolbarModule} from '@angular/material/toolbar';
```
imports: [
  MatToolbarModule
],
```

【讨论】：