浅谈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 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
js实现select跳转功能代码
Oct 22 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
深入了解JavaScript 私有化
May 30 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
JS继承实现方法及优缺点详解
Sep 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
使用Apache的htaccess防止图片被盗链的解决方法
2013/04/27 PHP
学习php分页代码实例
2013/10/24 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
BootStrap中的表单大全
2016/09/07 Javascript
jQuery EasyUI Draggable拖动组件
2017/03/01 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
[48:30]LGD vs infamous Supermajor小组赛D组 BO3 第一场 6.3
2018/06/04 DOTA
Python中生成器和yield语句的用法详解
2015/04/17 Python
Python实现的选择排序算法示例
2017/11/29 Python
python抓取文件夹的所有文件
2018/02/27 Python
Python实现数据结构线性链表(单链表)算法示例
2019/05/04 Python
python中的数据结构比较
2019/05/13 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
Python猜数字算法题详解
2020/03/01 Python
python图片合成的示例
2020/11/09 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
工商管理专业职业生涯规划
2014/01/01 职场文书
打架检讨书50字
2014/01/11 职场文书
运动会开幕式主持词
2014/03/28 职场文书
初中作文评语大全
2014/04/23 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
干部作风建设工作总结
2014/10/29 职场文书
运动会广播稿20字
2015/08/19 职场文书
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
python画条形图的具体代码
2022/04/20 Python