因爲公司須要,開始學習angular,這個傳聞中學習曲線極其陡峭的前端框架,並開始寫第一個用angular的項目,截止今天初步完成現有需求,顧在此作一次遇到問題的總結,以便知識的掌握。css
在常規項目中,使用錨點用來作"智能"定位效果時,只需這麼寫:
複製代碼
<a href="#test">走你</a>
<div id="test">被定位區域</div>
複製代碼
可是在ng中,a標籤中的href屬性會自動的使用路由機制,最後的結果會被當成跳轉的路由地址,具體的緣由有待進一步考證,反正最後的結果就是上面的寫法不生效,生效寫法:
複製代碼
<a router="./" [fragment]="test">來吧</a>
<div id="test">被定位區域</div>
複製代碼
以前中vue寫項目的時候,會遇到組件風格與第三方UI庫衝突的現象,用過vue的同窗都瞭解,在vue中有個scoped這個做用域的概念,若是要自定義與UI庫衝突的地方有如下幾種方式:html
.a /deep/ .b {...}
.a <<< .b{...}
那麼在ng中個什麼狀況呢?首先須要瞭解ng渲染組件的機制,在ng中有一個東東叫shadowDOM;前端
解決方法:vue
在組件的.ts文件中
import { ViewEncapsulation } from '@angular/core';
@Commpoent({
...
encapsulation: ViewEncapsulation.None
})
複製代碼
若是這樣仍是覆蓋不了,那就查查類名拼寫啊、層級嵌套啊、和類名的位置等等,我曾經就是由於把類名加的位置不對致使樣式不生效的,你們不要學我喲!npm
<li v-for="(item,index) in list" :index="index">{{item.title}}</li>
複製代碼
<li *ngFor="let item of list; index as i" [attr.index]="i"></li>
複製代碼
不少時候,咱們須要用的某個插件可能在npm上沒有,或者因爲各類版本問題,致使使用的時候會有亂七八糟的bug,找緣由,去解決,費時費力; 用了ng才能明白,之前用vue的時候是多麼的幸福,使用vue常規業務在國內基本都是即搜即用,ng就。。。嗯,學英語ing~。json
解決方案:api
(window as any).**
;ps: angular.json等其餘方式也是能夠的的,看各自實際狀況而定;bash
@HostListener('window:scroll', ['$event'])
public onScroll = () => {
do something
}
複製代碼
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);
})
}
複製代碼