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 相关文章推荐
Javascript 强制类型转换函数
May 17 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
JavaScript获得url所有参数键值表的方法
Mar 21 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
JS常见内存泄漏及解决方案解析
May 30 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的知识
2006/11/17 PHP
mysql limit查询优化分析
2008/11/12 PHP
PHP setTime 设置当前时间的代码
2012/08/27 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
ThinkPHP模板之变量输出、自定义函数与判断语句用法
2014/11/01 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
tp5框架使用composer实现日志记录功能示例
2019/01/10 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
jQuery 仿百度输入标签插件附效果图
2014/07/04 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
如何配置、使用和清除Smarty缓存
2015/12/23 面试题
SQL面试题
2013/12/09 面试题
特此通知格式
2015/04/27 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
电工生产实习心得体会
2016/01/22 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
python 实现两个变量值进行交换的n种操作
2021/06/02 Python