浅谈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);
    })
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 利用Angular2的Observables实现交互控制的方法

    在Angular1.x中,我们使用Promise来处理各种异步.但是在angular2中,使用的是Reactive Extensions (Rx)的Observable.对于Promise和Observable的区别,网上有很多文章,推荐egghead.io上的这个7分钟的视频(作者 Ben Lesh).在这个视频的介绍中,主要说的,使用Observable创建的异步任务,可以被处理,而且是延时加载的.这篇文章里,我们主要针对一些在跟服务器端交互的时候遇到的问题,来看看Observable给我们

  • Angular2平滑升级到Angular4的步骤详解

    前言 Angular4终于在两天前发布了正式版本,那么怎么升级呢?其实Angular2和Angular4之间属于平滑过渡,并不像1和2之间颠覆性的重写代码. Angular4现已发布  http://www.jb51.net/article/109685.htm 为什么跳过Angular 3? 根据Angular团队首席开发Igor Minar的说法:随着Angular 2的发布,Angular团队引入了语义化版本控制规范,即:将语义化版本用三组数字来表示,按照major.minor.patch

  • angular中两种表单的区别(响应式和模板驱动表单)

    angular的表单 angular的表单分为两种,一种是响应式的表单,另一种是模板驱动表单.使用'@angular/forms'库中的FormGroup, FormControl,FormArray,FormBuilder 等类构建出的数据对象就是响应式的表单,在响应式的表单中,我们会在数据源里面进行各种操作,像添加校验等,在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)

  • angular 用Observable实现异步调用的方法

    Observable(可观察对象) Observable(可观察对象)是基于推送(Push)运行时执行(lazy)的多值集合. 拉取(Pull)和推送(Push) 拉取和推送是数据生产者和数据消费者之间通信的两种不同机制. 拉取:在拉取系统中,总是由消费者决定何时从生产者那里获得数据.生产者对数据传递给消费者的时间毫无感知(被动的生产者,主动的消费者) 推送:在推送系统中生产者决定何时向消费者传递数据,消费者对何时收到数据毫无感知(被动的消费者) js中的Promise和Observable 现

  • Angular项目如何升级至Angular6步骤全纪录

    前言 前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试.总的来说,两次升级过程比较类似,也不算复杂. 2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架和工具链,目的在于使其变得更小更快. 特性的小改动: animations: 只能使用 WA-polyfill 和 AnimationBuilder animations: 在转换匹配器中暴露元素和参数 common: 在 NgIf 中使用非模板

  • Angular(5.2->6.1)升级小结

    Angular(5.2->6.1)升级小结

    在前面的文章中也曾经分别提到过,angular6由于存在一些稍大的变化,所以不能像Angular4到Angular5那样基本无感地进行升级,这里结合官方提示,简单整理一下Angular5.2到目前稳定的6.1的升级要点. 事前准备 变更内容 除此之外,还需要确认如下内容: tsconfig.json: preserveWhitespaces设定为off(v6缺省设定) package.json中scripts的使用,所有的cli命令统一使用两个横线–传入参数(POSIX规范) ngModelCh

  • angular6 填坑之sdk的方法

    技术背景:angular + ant zorro 最为大型前端团队首选的前端技术框架,angular,在国内多少还是有些水土不服.本人将针对angular做个一系列的填坑分享. 坑一:sdk angular的sdk不属于各个模块,直接挂载在body下面, ant design直接使用sdk,导致任何的弹出层,如select,dropdown,picker等在弹出来的时候自动创建覆盖全局的sdk,需要点击sdk才能关闭已打开的下拉. 明显需要点击两次才能出现一个下拉是产品们不能接受的. 解决方案有

  • Angular5升级RxJS到5.5.3报错：EmptyError: no elements in sequence的解决方法

    前言 RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单.可是最近在升级中遇到了一些问题,下面就来给大家介绍下,给同样遇到这个问题发朋友们一些参考,下面话不多说了,来一起看看详细的介绍吧. Angular 5.0.5升级RxJS到5.5.3报错: ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence Em

  • 详解从angular-cli：1.0.0-beta.28.3升级到@angular/cli：1.0.0

    现在Angular CLI在npm下通过@angular/cli来替代angular-cli,并且它只支持Node6.9.0或更高的版本,npm 3或更高的版本.所以在升级angular cli之前,请先升级node和npm. 如果你使用Angular CLI beta.28或更低的版本,你需要先卸载掉 angular-cli包: npm uninstall -g angular-cli npm uninstall --save-dev angular-cli 如果你忘记了更新npm,执行上面第

  • @angular前端项目代码优化之构建Api Tree的方法

    @angular前端项目代码优化之构建Api Tree的方法

    前颜(yan) 在前端项目的开发过程中,往往后端会给到一份数据接口(本文简称api),为了减少后期的维护以及出错成本,我的考虑是希望能够找到这么一种方法,可以将所有的api以某种方式统一的管理起来,并且很方便的进行维护,比如当后端修改了api名,我可以很快的定位到该api进行修改,或者当后端添加了新的api,我可以很快的知道具体是一个api写漏了. 于是,我有了构建Api Tree的想法. 一.前后端分离(Resful api) 在前后端分离的开发模式中,前后端的交互点主要在于各个数据接口,也就

随机推荐