这篇文章主要介绍了浅谈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);
    })
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

最新资讯
坚果手机团队:新机或与罗永浩直播间合作 教育硬件将很快推出

坚果手机团队:新机或与

Smartisan 产品经理朱海舟透露,未来将会持续交朋友,希望
营收同比再度下滑 “百岁老人”IBM靠分拆能否焕发活力?

营收同比再度下滑 “

IBM能否借分拆重回历史高光?
美国司法部将在周二向谷歌发起反垄断诉讼

美国司法部将在周二向

据报道,美国司法部将在周二向谷歌发起反垄断诉讼。
“C端搭台、B端唱戏” 双面的名创优品

“C端搭台、B端唱戏”

随着国内门店趋于饱和、国外扩张尚存不确定性及竞争日
西瓜视频投入20亿元补贴 与B站竞争的火药味越来越重了

西瓜视频投入20亿元补

10月20日,在2020西瓜PLAY好奇心大会上,西瓜视频总裁任利
学而思网校回应被网信部门约谈:系4个月之前的事情

学而思网校回应被网信

学而思网校今天回应了被网信部门约谈的情况,此次并非再
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,