浅谈Angular7 项目开发总结
由于公司需要,开始学习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); }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
这篇文章主要介绍了解决angular的post请求后SpringMVC后台接收不到参数值问题的方法,感兴趣的小伙伴们可以参考一下2015-12-12Angular 结合 dygraphs 实现 annotation功能
这篇文章主要介绍了Angular 结合 dygraphs 实现 annotation,本文,我们直接结合 Angular 来演示,如何通过 dygraphs 实现折线图上的 annotation 的功能,需要的朋友可以参考下2022-08-08Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。2018-03-03AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
这篇文章主要介绍了AngularJS实现与Java Web服务器交互操作的方法,结合实例形式较为详细的分析了AngularJS前台ajax提交与javascript后台处理的完整流程与实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2016-11-11angularJs中orderBy筛选以及filter过滤数据的方法
今天小编就为大家分享一篇angularJs中orderBy筛选以及filter过滤数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论