angualr7項目開發總結

因爲公司須要,開始學習angular,這個傳聞中學習曲線極其陡峭的前端框架,並開始寫第一個用angular的項目,截止今天初步完成現有需求,顧在此作一次遇到問題的總結,以便知識的掌握。css

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庫衝突的地方有如下幾種方式:html

  1. 在App.vue文件中聲名樣式;
  2. 在子組件中添加多個style標籤;
  3. 使用深度做用選擇器—— '>>>';
    • scss:.a /deep/ .b {...}
    • stylus: .a <<< .b{...}

那麼在ng中個什麼狀況呢?首先須要瞭解ng渲染組件的機制,在ng中有一個東東叫shadowDOM前端

解決方法:vue

在組件的.ts文件中

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

@Commpoent({
    ...
    encapsulation: ViewEncapsulation.None
})
複製代碼

若是這樣仍是覆蓋不了,那就查查類名拼寫啊、層級嵌套啊、和類名的位置等等,我曾經就是由於把類名加的位置不對致使樣式不生效的,你們不要學我喲!npm

3、元素上添加自定義屬性

  1. vue寫法
<li v-for="(item,index) in list" :index="index">{{item.title}}</li>
複製代碼
  1. ng寫法
<li *ngFor="let item of list; index as i" [attr.index]="i"></li>
複製代碼

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

不少時候,咱們須要用的某個插件可能在npm上沒有,或者因爲各類版本問題,致使使用的時候會有亂七八糟的bug,找緣由,去解決,費時費力; 用了ng才能明白,之前用vue的時候是多麼的幸福,使用vue常規業務在國內基本都是即搜即用,ng就。。。嗯,學英語ing~。json

解決方案:api

  1. 將如要用到的插件放入assets文件夾中;
  2. 在根目錄下的index.html中script引入;
  3. 在應用的組件中使用(window as any).**;

ps: angular.json等其餘方式也是能夠的的,看各自實際狀況而定;bash

5、監聽滾動事件

  1. 使用Hostlistener`
@HostListener('window:scroll', ['$event'])
  public onScroll = () => {
    do something
  }
複製代碼
  1. 使用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);
        })
  }
複製代碼
相關文章
相關標籤/搜索