1. 程式人生 > >Angular 7 專案開發總結

Angular 7 專案開發總結

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

一、在angular專案中,如何使用錨點

在常規專案中,使用錨點用來做"智慧"定位效果時,只需這麼寫:
複製程式碼
<a href="#test">走你</a>
<div id="test">被定位區域</div>
複製程式碼
但是在ng中,a標籤中的href屬性會自動的使用路由機制,最後的結果會被當成跳轉的路由地址,具體的原因有待進一步考證,反正最後的結果就是上面的寫法不生效,生效寫法:
複製程式碼
<a router="./" [fragment]="test">來吧</a>
<div id="test">被定位區域</div>
複製程式碼

二、元件中修改第三方UI庫樣式

之前中vue寫專案的時候,會遇到元件風格與第三方UI庫衝突的現象,用過vue的同學都瞭解,在vue中有個scoped這個作用域的概念,如果要自定義與UI庫衝突的地方有以下幾種方式:

  1. 在App.vue檔案中聲名樣式;
  2. 在子元件中新增多個style標籤;
  3. 使用深度作用選擇器—— '>>>';
    • scss:.a /deep/ .b {...}
    • stylus: .a <<< .b{...}

那麼在ng中個什麼情況呢?首先需要了解ng渲染元件的機制,在ng中有一個東東叫showDOM

解決方法:

在元件的.ts檔案中

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

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

如果這樣還是覆蓋不了,那就查查類名拼寫啊、層級巢狀啊、和類名的位置,我曾經就是因為把類名加的位置不對導致樣式不生效的,大家不要學我喲!

三、元素上新增自定義屬性

  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>
複製程式碼

四、不使用npm引入第三方外掛的用法之一

很多時候,我們需要用的某個外掛可能在npm上沒有,或者由於各種版本問題,導致使用的時候會有亂七八糟的bug,找原因,去解決,費時費力; 用了ng才能明白,以前用vue的時候是多麼的幸福,使用vue常規業務在國內基本都是即搜即用,ng就。。。嗯,學英語ing~。

解決方案:

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

ps: angular.json等其他方式也是可以的的,看各自實際情況而定;

五、監聽滾動事件

  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);
        })
  }
複製程式碼