angualr7项目开发总结

因为公司须要，开始学习angular，这个传闻中学习曲线极其陡峭的前端框架，并开始写第一个用angular的项目，截止今天初步完成现有需求，顾在此作一次遇到问题的总结，以便知识的掌握。

1、在angular项目中，如何使用锚点

在常规项目中，使用锚点用来作"智能"定位效果时，只需这么写：
复制代码

<a href="#test">走你</a>
<div id="test">被定位区域</div>
复制代码

可是在ng中，a标签中的href属性会自动的使用路由机制，最后的结果会被当成跳转的路由地址，具体的缘由有待进一步考证，反正最后的结果就是上面的写法不生效，生效写法：
复制代码

<a router="./" [fragment]="test">来吧</a>
<div id="test">被定位区域</div>
复制代码

2、组件中修改第三方UI库样式

以前中vue写项目的时候，会遇到组件风格与第三方UI库冲突的现象，用过vue的同窗都了解，在vue中有个scoped这个做用域的概念，若是要自定义与UI库冲突的地方有如下几种方式：

1. 在App.vue文件中声名样式；
2. 在子组件中添加多个style标签；
3. 使用深度做用选择器—— '>>>';
   • scss：.a /deep/ .b {...}
   • stylus: .a <<< .b{...}

那么在ng中个什么状况呢？首先须要了解ng渲染组件的机制，在ng中有一个东东叫shadowDOM；

解决方法:

在组件的.ts文件中

import { ViewEncapsulation } from '@angular/core';

@Commpoent({
    ...
    encapsulation: ViewEncapsulation.None
})
复制代码

若是这样仍是覆盖不了，那就查查类名拼写啊、层级嵌套啊、和类名的位置等等，我曾经就是由于把类名加的位置不对致使样式不生效的，你们不要学我哟！

3、元素上添加自定义属性

1. vue写法

<li v-for="(item,index) in list" :index="index">{{item.title}}</li>
复制代码

2. ng写法

<li *ngFor="let item of list; index as i" [attr.index]="i"></li>
复制代码

4、不使用npm引入第三方插件的用法之一

不少时候，咱们须要用的某个插件可能在npm上没有，或者因为各类版本问题，致使使用的时候会有乱七八糟的bug，找缘由，去解决，费时费力； 用了ng才能明白，之前用vue的时候是多么的幸福，使用vue常规业务在国内基本都是即搜即用，ng就。。。嗯，学英语ing~。

解决方案:

1. 将如要用到的插件放入assets文件夹中；
2. 在根目录下的index.html中script引入；
3. 在应用的组件中使用(window as any).**;

ps: angular.json等其余方式也是能够的的，看各自实际状况而定；

5、监听滚动事件

1. 使用Hostlistener`

@HostListener('window:scroll', ['$event'])
  public onScroll = () => {
    do something
  }
复制代码

2. 使用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);
        })
  }
复制代码