浅谈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里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
微信小程序获取微信运动步数的实例代码
Jul 20 Javascript
基于wordpress的ajax写法详解
Jan 02 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
vue-froala-wysiwyg 富文本编辑器功能
Sep 19 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
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代码
2006/12/06 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
bootstrap与Jquery UI 按钮样式冲突的解决办法
2016/09/23 Javascript
jstree的简单实例
2016/12/01 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
python实现海螺图片的方法示例
2019/05/12 Python
django-csrf使用和禁用方式
2020/03/13 Python
python小白切忌乱用表达式
2020/05/29 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
用python制作个视频下载器
2021/02/01 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
宝塔面板出现“open_basedir restriction in effect. ”的解决方法
2021/03/14 PHP
Java的for语句中break, continue和return的区别
2013/12/19 面试题
中班上学期幼儿评语
2014/04/30 职场文书
学校文明单位申报材料
2014/05/06 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
政审证明范文
2015/06/19 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书