Angular6新特性之角形材料

角形材料是包含导航/仪表板/表格三种图形类型，这篇文章中将会了解一些其使用的方式。

准备：安装材料

进入到上篇文章创建的demo2，使用ng add进行安装

刘淼$安装命令：ng add @angular/material

liumiaocn:demo2刘淼$ ng add @ angular/材料通过纱线安装工具包装。纱线添加v1.7.0[1/4]？解析包.[2/4] ?正在获取包.[3/4] ?链接依赖项.警告" @angular/[emailprotected]"具有未满足的对等依赖关系@angular/[emailprotected].[4/4] ?打造新鲜包装.成功保存了lockfile.success保存了一个新的依赖项。信息directdependencies@ angular/[电子邮件保护]信息alldependencies@ angular/[电子邮件保护]在13.02秒中完成。通过纱线安装了工具包. UPDATE package.json (1374字节)UPDATE angular.json (3785字节)UPDATE src/app/app。模块。ts(423字节)UPDATE src/index.html (469字节)UPDATE src/style . CSS(165字节)liumiaocn:demo2刘淼$确认包裹的变化

安装之前对package.json做了备份，可以看出此次操作有何变化

limiaocn : de m2刘淼$ diff包。JSON包。JSON。org 20d 19 ' @ angular/material ' : '^6.4.0',26,27c25 '区域。js ' : '^0.8.26' '，@ angular/CDK ' : '^6.2.0'-'区。js ' : '^0.8.26'29a28 ' @ angular/编译器-CLI ' : '^6.0.3',30a30 ' typescript ' : ' ~ 2。7 .2 '，32d 31 ' @ angular/编译器-CLI ' 33: '^6.0.3',47,48c46由于差速器命令自身的限制，一些没有变化的内容也被列了出来，确认之后发现@棱角分明/材质和@angular/cdk是添加的内容

材料导航

使用材料创建航行只需要如下的命令即可

创建命令：ng generate @ angular/material : material-navname名称

接下来我们创建一个名为我的导航的材料导航

limiaocn :演示2刘淼$ ng generate @ angular/material : material-nav-name mynavCREAte src/app/my nav/my nav。组件。CSS(129字节)CREATE src/app/my nav。组件。html(948字节)CREATE src/app/my nav/my nav。组件。规格。ts(698字节)CREATE src/app/my nav。组件。ts(577字节)更新src/app/app确认选择器为app-mynav

liumiaocn:demo2刘淼$ cat src/app/我的导航/我的导航。组件。t从“@棱角分明/核心”导入{组件}；从" @angular/cdk/layout "导入{断点观察者，断点，断点状态};从“rjs”导入{可观察到}；从“rxjs/运算符”导入{ map }；@ Component({选择器： ' app-my nav '，templateUrl: ' ./mynav.component.html '，style URL 3360[./mynav.component.css']})导出类我的导航组件{ isHandset $ : Observableboolean=this。断点观察者。观察(断点。手机)。管道(图(结果=结果。火柴)；构造函数(private breakpoint observer : breakpoint observer){ } } liumiaonc : de m2刘淼$替换app.component.html的内容，确认材料导航的运行状况

刘淼$运行尼日利亚发球

刘淼服务**角度实时开发服务器正在本地主机：4200上侦听，请在http://本地主机：4200上打开您的浏览器/* * *.省略 wdm:编译成功。确认材料导航运行页面

可以看到，缺省生成的材料导航就是一个补充报道的菜单布局

材料表

创建命令：ng generate @ angular/material : material-tablename名称

创建名为桌面模块的材料表：

limiaocn :演示2刘淼$ ng generate @ angular/material : material-table-name my table CREATE src/app/my table/my table-数据源。ts(3360字节)CREATE src/app/my table。组件。CSS(0字节)CREATE src/app/my table/my table。组件。html(857字节)CREATE src/app/my table。组件。规格。ts(618字节)CREATE src/app/my表替换app.component.html并运行尼日利亚发球

刘淼$确认材料表运行页面，顶部对桌子可以进行排序操作

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

总结

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