material2工具栏的使用方法

Question

我正在使用 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 rejection: Template parse errors: Can't bind to 'color' since it isn't a known property of 'md-toolbar'. 1. If 'md-toolbar' is an Angular component and it has 'color' input, then verify that it is part of this module. 2. If 'md-toolbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

][color]="red"> My Application Title "): AppComponent@39:12 'md-toolbar' is not a known element: 1. If 'md-toolbar' is an Angular component, then verify that it is part of this module. 2. If 'md-toolbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

提前致谢

Answer 1

在 app.compoent.ts

中进行更改后现在可以使用

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

  imports: [
    MdToolbarModule.forRoot(),   

  ],

Answer 2

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

Answer 3

app.module.ts 文件

2 项更改

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

material2工具栏的使用方法

How to use material 2 toolbar

angular

angular-material2

app.module.ts 文件