Angular Material是包含Navigation/Dashboard/Table三種圖形類型，這篇文章中將會了解一些其使用的方式。

準備:安裝Material

進入到上篇文章創建的demo2，使用ng add進行安裝

liumiaocn:demo2 liumiao$ pwd/tmp/trainings/angualr/demo2liumiaocn:demo2 liumiao$

安裝命令：ng add @angular/material

liumiaocn:demo2 liumiao$ ng add @angular/materialInstalling packages for tooling via yarn.yarn add v1.7.0[1/4] ? Resolving packages...[2/4] ? Fetching packages...[3/4] ? Linking dependencies...warning " > @angular/material@6.4.0" has unmet peer dependency "@angular/cdk@6.4.0".[4/4] ? Building fresh packages...success Saved lockfile.success Saved 1 new dependency.info Direct dependencies└─ @angular/material@6.4.0info All dependencies└─ @angular/material@6.4.0✨ Done in 13.02s.Installed packages for tooling via yarn.UPDATE package.json (1374 bytes)UPDATE angular.json (3785 bytes)UPDATE src/app/app.module.ts (423 bytes)UPDATE src/index.html (469 bytes)UPDATE src/styles.css (165 bytes)liumiaocn:demo2 liumiao$

確認package的變化

安裝之前對package.json做了備份，可以看出此次操作有何變化

liumiaocn:demo2 liumiao$ diff package.json package.json.org20d19<   "@angular/material": "^6.4.0",26,27c25<   "zone.js": "^0.8.26",<   "@angular/cdk": "^6.2.0"--->   "zone.js": "^0.8.26"29a28>   "@angular/compiler-cli": "^6.0.3",30a30>   "typescript": "~2.7.2",32d31<   "@angular/compiler-cli": "^6.0.3",47,48c46<   "tslint": "~5.9.1",<   "typescript": "~2.7.2"--->   "tslint": "~5.9.1"liumiaocn:demo2 liumiao$

由于diff命令自身的限制，一些沒有變化的內容也被列了出來，確認之后發現@angular/material和@angular/cdk是添加的內容

Material Navigation

使用Material 創建Navigation只需要如下的命令即可

創建命令：ng generate @angular/material:material-nav –name 名稱

接下來我們創建一個名為mynav的Material Navigation

liumiaocn:demo2 liumiao$ ng generate @angular/material:material-nav --name mynavCREATE src/app/mynav/mynav.component.css (129 bytes)CREATE src/app/mynav/mynav.component.html (948 bytes)CREATE src/app/mynav/mynav.component.spec.ts (698 bytes)CREATE src/app/mynav/mynav.component.ts (577 bytes)UPDATE src/app/app.module.ts (793 bytes)liumiaocn:demo2 liumiao$

確認selector為app-mynav

liumiaocn:demo2 liumiao$ cat src/app/mynav/mynav.component.tsimport { Component } from '@angular/core';import { BreakpointObserver, Breakpoints, BreakpointState } from '@angular/cdk/layout';import { Observable } from 'rxjs';import { map } from 'rxjs/operators';@Component({ selector: 'app-mynav', templateUrl: './mynav.component.html', styleUrls: ['./mynav.component.css']})export class MynavComponent { isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)  .pipe(   map(result => result.matches)  ); constructor(private breakpointObserver: BreakpointObserver) {} }liumiaocn:demo2 liumiao$