Angular6新特性之Angular Material


Posted in Javascript onDecember 28, 2018

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/index.html (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运行页面

Angular6新特性之Angular Material

可以看到,缺省生成的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可以进行排序操作

Angular6新特性之Angular Material

滑动到尾部可以看到具有分页的功能

Angular6新特性之Angular Material

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
jQuery select的操作实现代码
May 06 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
vue component组件使用方法详解
Jul 14 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
Nov 05 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 #Javascript
小程序实现抽奖动画
Apr 16 #Javascript
微信小程序实现文字从右向左无限滚动
Nov 18 #Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
Dec 28 #Javascript
小程序文字跑马灯效果
Dec 28 #Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 #Javascript
Angular使用Restful的增删改
Dec 28 #Javascript
You might like
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
2009/10/24 Javascript
jquery 与NVelocity 产生冲突的解决方法
2011/06/13 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
JS折半插入排序算法实例
2015/12/02 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
JavaScript 函数节流详解及方法总结
2017/02/09 Javascript
js原生Ajax的封装和原理详解
2017/03/11 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
2018/12/22 jQuery
python显示天气预报
2014/03/02 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
python检测远程服务器tcp端口的方法
2015/03/14 Python
改进Django中的表单的简单方法
2015/07/17 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
PyQt5中QTableWidget如何弹出菜单的示例代码
2020/02/23 Python
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
联想英国官网:Lenovo英国
2019/07/17 全球购物
公司司机岗位职责
2014/02/07 职场文书
省级青年文明号申报材料
2014/05/23 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
欢迎词怎么写
2015/01/23 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
SQL SERVER中常用日期函数的具体使用
2021/04/08 SQL Server
Python基础之tkinter图形化界面学习
2021/04/29 Python
DE1107机评
2022/04/05 无线电