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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
JavaScript插入排序算法原理与实现方法示例
Aug 06 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 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/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js css 实现遮罩层覆盖其他页面元素附图
2014/09/22 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
通过python将大量文件按修改时间分类的方法
2018/10/17 Python
django echarts饼图数据动态加载的实例
2019/08/12 Python
Python通过递归获取目录下指定文件代码实例
2019/11/07 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
Columbia美国官网:美国著名的户外服装品牌
2016/11/24 全球购物
MYSQL基础面试题
2012/05/13 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
java设计模式--原型模式详解
2021/07/21 Java/Android
python 单机五子棋对战游戏
2022/04/28 Python