Angualr学习记录3-导入Angular Material

2020年10月22日14:38:21

参考：

https://material.angular.io/

https://material.angular.cn/

上面是英文，但是是最新的，下面是中文的，但是是7.2.0版本的，两者可以对照这一起看，连猜带蒙也能看懂不少。

1.安装Angular Material

ng add @angular/material

这个方法用上去比较简单

当在项目中打开控制台然后安装Material的时候，他直接会帮你把当前项目给改好的，把一些文件给引入

问题1：主题？我选了普通

问题2：风格？是

问题3：浏览器动画？要

（其实不太懂，先选了再说）

2.引入一个组件，以toolbar为例

2.1 找到想要的组件

1.表示当前版本

2.表示是toolbar组件

3.按钮显示代码

4.按钮打开在线vscode，可以直观的看到代码和显示效果

复制html和css文件中的代码分别复制到自己的app.component.html和app.component.css文件中

然后在app.moudle.ts引入toolbar和icon组件

保存文件然后就可以出现效果了

如果控制台报错，网页报错等，一般情况下重新运行项目即可

结果：

就是不知道按钮的样式和示例为什么不一样哈，但是不管怎么说，也算是运行起来了。