Angular Material design设计

官网：

https://material.io/design/

https://meterial.io/components

优秀的Meterial design站点：

http://materialdesignblog.com/

并不是万能的，都有约束条件。

优点：兼容性好，可扩展性强，可测试性好，对主题的支持好。

缺点：组件不是特别丰富。

安装：

//其它方式
$ sudo cnpm i --save @angular/material@2.0.0-beta.7

$ sudo yarn add @angular/material --save

$ npm i @angular/material --save

安装的版本是"@angular/material": "^7.1.0",

有个依赖要手动安装

$ sudo yarn add @angular/cdk@6.4.6 --save

如果是用ng add @angular/material 会自动安装cdk(Component Dev Kit)依赖。

1、控制台报警告：Could not find Angular Material core theme。

在styles.scss中引入angular materail主题：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

内建主题有这几种：

Angular Material design设计

可以用scss自定义主题。

2、ERROR Error: Found the synthetic listener @transform.start. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

3、mat-toolbar，mat-sidenav和mat-sidenav-container不是已知的元素？

Uncaught Error: Template parse errors: 'mat-icon' is not a known element: 1. If 'mat-icon' is an Angular component, then verify that it is part of this module.

应该将模块导入与组件相关的module.ts文件中。比如我是在header这个组件中用到了mat-icon，而我的header组件是放在core Module中的，那就要在core Module中去import MatIconModule，而不是在app.module中引入。

4、ERROR Error: Could not find HttpClient provider for use with Angular Material icons.

使用SVG Icon的时候涉及到URL的解析，依赖Http。需要导入HttpClientModule。

5、NewTaskComponent.html:14 ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.

使用DatePicker的时候同时要导入MatNativeDateModule用作DateFormat。

6、core.es5.js:178 Could not find HammerJS. Certain Angular Material components may not work correctly.

移动端用HammerJS去处理一些事件。

$ npm install --save hammerjs

安装好以后在coreModule中

import 'hammerjs';

二、Material组件

1、SidebarComponent侧边栏导航：

https://material.angular.io/components/sidenav/overview

<mat-sidenav-container> 
  <mat-sidenav #sidenav>
    <app-sidebar></app-sidebar>
  </mat-sidenav>
  <div class="site">
    <header>
      <app-header></app-header>
    </header>
    <main>
      <button (click)="sidenav.open()">打开侧边栏</button>
    </main>
    <footer>
      <app-footer></app-footer>
    </footer>
  </div>
</mat-sidenav-container>

View Code