angualr7專案開發總結

娜一抹驚鴻發表於2018-12-17

由於公司需要，開始學習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中有一個東東叫shadowDOM；

解決方法:

在元件的.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);
        })
  }
複製程式碼

相關文章