欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular6新特性之Angular Material

程序员文章站 2022-09-05 08:59:46
angular material是包含navigation/dashboard/table三种图形类型,这篇文章中将会了解一些其使用的方式。 准备:安装material...

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

总结

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