浅谈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获取某月的最后一天日期的简单实例
Jun 22 Javascript
jQuery基础知识小结
Dec 22 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
json对象及数组键值的深度大小写转换问题详解
Mar 30 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
Nov 21 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
js canvas实现橡皮擦效果
Dec 20 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 Javascript
Vue实现简单的跑马灯
May 25 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 破解防盗链图片函数
2008/12/09 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
php递归遍历多维数组的方法
2015/04/18 PHP
php实现对象克隆的方法
2015/06/20 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Python3使用TCP编写一个简易的文件下载器功能
2019/05/08 Python
python将音频进行变速的操作方法
2020/04/08 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
C#笔试题和英文面试题
2013/02/07 面试题
Python如何定义一个函数
2015/09/01 面试题
部队2014年终工作总结
2014/11/27 职场文书
护士求职自荐信
2015/03/25 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis