欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular6新特性之Angular Material

 更新時間：2018年12月28日 10:27:22   作者：liumiaocn  
今天小編就為大家分享一篇關(guān)于Angular6新特性之Angular Material，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧

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

準(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<boolean> = 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.html 
<app-mynav></app-mynav>
liumiaocn: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.html 
<app-mytable></app-mytable>
liumiaocn:demo2 liumiao$

確認(rèn)Material Table運(yùn)行頁面，頂部對table可以進(jìn)行排序操作

滑動到尾部可以看到具有分頁的功能

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。如果你想了解更多相關(guān)內(nèi)容請查看下面相關(guān)鏈接

相關(guān)文章

最新評論