浅谈Angular7 项目开发总结


Posted in Javascript onDecember 19, 2018

由于公司需要,开始学习angular,这个传闻中学习曲线及其陡峭的前端框架,并开始写第一个用angular的项目,截止今天初步完成现有需求,顾在此做一次遇到问题的总结,以便知识的掌握。

一、在angular项目中,如何使用锚点

在常规项目中,使用锚点用来做"智能"定位效果时,只需这么写:

<a href="#test" rel="external nofollow" >走你</a>
<div id="test">被定位区域</div>

但是在ng中,a标签中的href属性会自动的使用路由机制,最后的结果会被当成跳转的路由地址,具体的原因有待进一步考证,反正最后的结果就是上面的写法不生效,生效写法:

<a router="./" [fragment]="test">来吧</a>
<div id="test">被定位区域</div>

二、组件中修改第三方UI库样式

之前中vue写项目的时候,会遇到组件风格与第三方UI库冲突的现象,用过vue的同学都了解,在vue中有个scoped这个作用域的概念,如果要自定义与UI库冲突的地方有以下几种方式:

  • 在App.vue文件中声名样式;
  • 在子组件中添加多个style标签;
  • 使用深度作用选择器—— '>>>';
    • scss:.a /deep/ .b {...}
    • stylus: .a <<< .b{...}

那么在ng中个什么情况呢?首先需要了解ng渲染组件的机制,在ng中有一个东东叫showDOM;

解决方法:

在组件的.ts文件中

import { ViewEncapsulation } from '@angular/core';

@Commpoent({
  ...
  encapsulation: ViewEncapsulation.None
})

如果这样还是覆盖不了,那就查查类名拼写啊、层级嵌套啊、和类名的位置,我曾经就是因为把类名加的位置不对导致样式不生效的,大家不要学我哟!

三、元素上添加自定义属性

vue写法

<li v-for="(item,index) in list" :index="index">{{item.title}}</li>

ng写法

<li *ngFor="let item of list; index as i" [attr.index]="i"></li>

四、不使用npm引入第三方插件的用法之一

很多时候,我们需要用的某个插件可能在npm上没有,或者由于各种版本问题,导致使用的时候会有乱七八糟的bug,找原因,去解决,费时费力;

用了ng才能明白,以前用vue的时候是多么的幸福,使用vue常规业务在国内基本都是即搜即用,ng就。。。嗯,学英语ing~。
解决方案:

  • 将如要用到的插件放入assets文件夹中;
  • 在根目录下的index.html中script引入;
  • 在应用的组件中使用(window as any).**;

ps: angular.json等其他方式也是可以的的,看各自实际情况而定;

五、监听滚动事件

使用Hostlistener`

@HostListener('window:scroll', ['$event'])
 public onScroll = () => {
  do something
 }

使用fromEvent

import { fromEvent } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
 export class Test{
  subscribeSoll;
  this.subscribeScoll = fromEvent(window,'scroll')
    .pipe(debounceTime(1000))
    .subscribe( (event) => {
      console.log(event);
    })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
理解JavaScript中的事件
Sep 23 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
针对初学者的jQuery入门指南
Aug 15 Javascript
Vue.js快速入门实例教程
Oct 15 Javascript
JS批量替换内容中关键词为超链接
Feb 20 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
Mar 23 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 #Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 #Javascript
vue使用Google地图的实现示例代码
Dec 19 #Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 #Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 #Javascript
js指定日期增加指定月份的实现方法
Dec 19 #Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 #Javascript
You might like
php短域名转换为实际域名函数
2011/01/17 PHP
解析php中const与define的应用区别
2013/06/18 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
统计出现最多的字符次数的js代码
2010/12/03 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
Bootstarp风格的toggle效果分享
2016/02/23 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
angular route中使用resolve在uglify压缩后问题解决
2016/09/21 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的方法
2016/11/29 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
2019/09/27 Javascript
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
露营世界:Camping World
2017/02/02 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
网络安全方面的面试题
2016/01/07 面试题
控制工程专业个人求职信
2013/09/25 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
《望庐山瀑布》教学反思
2014/04/22 职场文书
求职简历自荐信
2014/06/18 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
高中运动会广播稿
2014/09/16 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android