angular小技巧总结

2017-10-30  本文已影响0人  盯裆猫_

前言:

最近一直在使用angular4,angular cli脚手架工具集成很多实用工具、命令。在实用中发现一些小技巧,也可能不算啥技巧,哈哈<_<。

1、使用angular cli命令,简单快捷;

2、angular组件中如何使用jQuery;

3、可以使用document.getElementsByTagName么?

4、Click事件中获取window对象;

一、简单快捷的angular cli命令

      安装angular cli脚手架工具,网上有很多教程哈,我也是根据教程安装的,不过我想说的是 node和 npm 一定要升级到最新的版本,否则安装失败。

       ng new demo  命令可以直接生成项目文件,十分方便。生成的项目里的 node_modules文件夹不完整哈,需要安装一下。cd进入到新建的文件夹里,使用ng serve 就可以启动localhost服务了哈。

生成项目命令 生成项目文件目录 访问localhost

  下面的命令可以快速创建组件、指令等,开发中提高效率。

创建命令

  其他命令:ng build --prod  打包命令,并且去掉没有用的代码;

二、angular组件中如何使用jQuery;

       在angular中不建议使用jQuery,容易引起冲突,导致报错。不过有些情况下jQuery实在是迫不得已需要使用,也是有方法的。不多说了,看图:

index文件中引入jQuery 组件中定义$ 效果

三、可以使用document.getElementsByTagName么?

     组件中可以使用document.getElementsByTagName方法哈,见下图:

点击结果 使用addEventListener添加事件

       组件的ngOnInit()周期函数内,完成初始化,可以自动获取DOM中的元素或者节点,与初次加载DOM效果相同。

四、Click事件中获取window对象

       angular中,click事件中$event包含多个属性,通过观察可以发现一个path属性,这个属性是事件冒泡到window的元素数组集合,通过这个数组不止能找出window 对象,能给相关联的元素都添加上事件。

path属性 获取window对象

       写的有点乱,没有啥主次、干货。angular包含的内容很多,还需要再深入学习,在网上看了很多关于angular 的 大神帖子,受益颇深。继续学习,学习!

上一篇下一篇

猜你喜欢

热点阅读