官網：

優秀的Meterial design站點：

并不是萬能的，都有約束條件。

優點：兼容性好，可擴展性強，可測試性好，對主題的支持好。

缺點：組件不是特別豐富。

安裝：

//其它方式

$ 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

一、相關報錯

1、控制臺報警告：Could not find Angular Material core theme。

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

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

內建主題有這幾種：

可以用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的時候依賴Http。需要導入HttpClient。

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側邊欄導航：

打開側邊欄

總結

以上是生活随笔為你收集整理的angular 居中_Angular Material design设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。