Angular Material是包含Navigation/Dashboard/Table三種圖形類型，這篇文章中將會了解一些其使用的方式。
網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、成都微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了利州免費(fèi)建站歡迎大家使用！
準(zhǔn)備:安裝Material
進(jìn)入到上篇文章創(chuàng)建的demo2，使用ng add進(jìn)行安裝
liumiaocn:demo2 liumiao$ pwd /tmp/trainings/angualr/demo2 liumiaocn:demo2 liumiao$
安裝命令：ng add @angular/material
liumiaocn:demo2 liumiao$ ng add @angular/material Installing 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.0 info 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$
確認(rèn)package的變化
安裝之前對package.json做了備份，可以看出此次操作有何變化
liumiaocn:demo2 liumiao$ diff package.json package.json.org 20d19 < "@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命令自身的限制，一些沒有變化的內(nèi)容也被列了出來，確認(rèn)之后發(fā)現(xiàn)@angular/material和@angular/cdk是添加的內(nèi)容
Material Navigation
使用Material 創(chuàng)建Navigation只需要如下的命令即可
創(chuàng)建命令：ng generate @angular/material:material-nav –name 名稱
接下來我們創(chuàng)建一個名為mynav的Material Navigation
liumiaocn:demo2 liumiao$ ng generate @angular/material:material-nav --name mynav CREATE 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$
確認(rèn)selector為app-mynav
重慶分公司
重慶分公司
liumiaocn:demo2 liumiao$ cat src/app/mynav/mynav.component.ts
import { 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 = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches)
);
constructor(private breakpointObserver: BreakpointObserver) {}
}
liumiaocn:demo2 liumiao$ 替換app.component.html的內(nèi)容，確認(rèn)Material Navigation的運(yùn)行狀況
liumiaocn:demo2 liumiao$ cat src/app/app.component.htmlliumiaocn:demo2 liumiao$
運(yùn)行ng serve
liumiaocn:demo2 liumiao$ ng serve ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ...省略 ℹ ｢wdm｣: Compiled successfully.
確認(rèn)Material Navigation運(yùn)行頁面
可以看到，缺省生成的Material Navigation就是一個Sidebar的菜單布局
Material Table
創(chuàng)建命令：ng generate @angular/material:material-table –name 名稱
創(chuàng)建名為mytable的Material Table：
liumiaocn:demo2 liumiao$ ng generate @angular/material:material-table --name mytable CREATE src/app/mytable/mytable-datasource.ts (3360 bytes) CREATE src/app/mytable/mytable.component.css (0 bytes) CREATE src/app/mytable/mytable.component.html (857 bytes) CREATE src/app/mytable/mytable.component.spec.ts (618 bytes) CREATE src/app/mytable/mytable.component.ts (701 bytes) UPDATE src/app/app.module.ts (993 bytes) liumiaocn:demo2 liumiao$ liumiaocn:demo2 liumiao$ grep app- src/app/mytable/mytable.component.ts selector: 'app-mytable', liumiaocn:demo2 liumiao$
替換app.component.html并運(yùn)行ng serve
liumiaocn:demo2 liumiao$ cat src/app/app.component.htmlliumiaocn:demo2 liumiao$
確認(rèn)Material Table運(yùn)行頁面，頂部對table可以進(jìn)行排序操作
滑動到尾部可以看到具有分頁的功能
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對創(chuàng)新互聯(lián)的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接
