溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
由于公司需要，開始學習angular，這個傳聞中學習曲線及其陡峭的前端框架，并開始寫第一個用angular的項目，截止今天初步完成現有需求，顧在此做一次遇到問題的總結，以便知識的掌握。
一、在angular項目中，如何使用錨點
在常規項目中，使用錨點用來做"智能"定位效果時，只需這么寫：
<a href="#test" rel="external nofollow" >走你</a> <div id="test">被定位區域</div>
但是在ng中，a標簽中的href屬性會自動的使用路由機制，最后的結果會被當成跳轉的路由地址，具體的原因有待進一步考證，反正最后的結果就是上面的寫法不生效，生效寫法：
<a router="./" [fragment]="test">來吧</a> <div id="test">被定位區域</div>
二、組件中修改第三方UI庫樣式
之前中vue寫項目的時候，會遇到組件風格與第三方UI庫沖突的現象，用過vue的同學都了解，在vue中有個scoped這個作用域的概念，如果要自定義與UI庫沖突的地方有以下幾種方式：
那么在ng中個什么情況呢？首先需要了解ng渲染組件的機制，在ng中有一個東東叫showDOM；
解決方法:
在組件的.ts文件中
import { ViewEncapsulation } from '@angular/core';
@Commpoent({
...
encapsulation: ViewEncapsulation.None
})
如果這樣還是覆蓋不了，那就查查類名拼寫啊、層級嵌套啊、和類名的位置，我曾經就是因為把類名加的位置不對導致樣式不生效的，大家不要學我喲！
三、元素上添加自定義屬性
vue寫法
<li v-for="(item,index) in list" :index="index">{{item.title}}</li>
ng寫法
<li *ngFor="let item of list; index as i" [attr.index]="i"></li>
四、不使用npm引入第三方插件的用法之一
很多時候，我們需要用的某個插件可能在npm上沒有，或者由于各種版本問題，導致使用的時候會有亂七八糟的bug，找原因，去解決，費時費力；
用了ng才能明白，以前用vue的時候是多么的幸福，使用vue常規業務在國內基本都是即搜即用，ng就。。。嗯，學英語ing~。
解決方案:
ps: angular.json等其他方式也是可以的的，看各自實際情況而定；
五、監聽滾動事件
使用Hostlistener`
@HostListener('window:scroll', ['$event'])
public onScroll = () => {
do something
}
使用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);
})
}
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
