浅谈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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
小程序实现长按保存图片的方法
Dec 31 Javascript
vue 中的动态传参和query传参操作
Nov 09 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跨服务器访问方法小结
2015/05/12 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
popdiv
2006/07/14 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
js 限制数字 js限制输入实现代码
2012/12/04 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
解析NodeJs的调试方法
2016/12/11 NodeJs
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
vue 中directive功能的简单实现
2018/01/05 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
JavaScript Blob对象原理及用法详解
2020/10/14 Javascript
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
python按比例随机切分数据的实现
2019/07/11 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python绘图实现显示中文
2019/12/04 Python
python中字符串的编码与解码详析
2020/12/03 Python
html5 Canvas画图教程(2)—画直线与设置线条的样式如颜色/端点/交汇点
2013/01/09 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
Oracle性能调优原则
2012/05/03 面试题
50道外企软件测试面试题
2014/08/18 面试题
自荐信的禁忌和要点
2013/10/15 职场文书
大学生会计职业生涯规划范文
2014/02/28 职场文书
市场部经理岗位职责
2014/04/10 职场文书
加油口号大全
2014/06/13 职场文书
项目工作说明书
2014/07/29 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书