浅谈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 相关文章推荐
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JScript中的条件注释详解
Apr 24 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
ionic2 tabs 图标自定义实例
Mar 08 Javascript
es6学习笔记之Async函数的使用示例
May 11 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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
咖啡的种类和口感
2021/03/03 新手入门
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP各种异常和错误的拦截方法及发生致命错误时进行报警
2016/01/19 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
浅谈javascript中createElement事件
2014/12/05 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
Angular JS 生成动态二维码的方法
2017/02/23 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
Python split() 函数拆分字符串将字符串转化为列的方法
2019/07/16 Python
python turtle 绘制太极图的实例
2019/12/18 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
个人自我鉴定范文
2013/10/04 职场文书
财务会计专业求职信
2014/06/09 职场文书
洗手间标语
2014/06/23 职场文书
公司授权委托书样本
2014/09/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
自荐信模板大全
2015/03/27 职场文书
幼儿园安全工作总结2015
2015/04/20 职场文书