angular material是包含navigation/dashboard/table三种图形类型，这篇文章中将会了解一些其使用的方式。
准备:安装material
进入到上篇文章创建的demo2，使用ng add进行安装
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/ (469 bytes) update src/styles.css (165 bytes) liumiaocn:demo2 liumiao$
确认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命令自身的限制，一些没有变化的内容也被列了出来，确认之后发现@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 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$
确认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的内容，确认material navigation的运行状况
liumiaocn:demo2 liumiao$ cat src/app/app.component.html <app-mynav></app-mynav> liumiaocn:demo2 liumiao$
运行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.
确认material navigation运行页面
可以看到，缺省生成的material navigation就是一个sidebar的菜单布局
material table
创建命令：ng generate @angular/material:material-table –name 名称
创建名为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并运行ng serve
liumiaocn:demo2 liumiao$ cat src/app/app.component.html <app-mytable></app-mytable> liumiaocn:demo2 liumiao$
确认material table运行页面，顶部对table可以进行排序操作
滑动到尾部可以看到具有分页的功能
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对移动技术网的支持。如果你想了解更多相关内容请查看下面相关链接
如对本文有疑问， 点击进行留言回复！！
Angular8引入百度Echarts进行图表分析的实现代码
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
angular inputNumber指令输入框只能输入数字的实现
网友评论