由于公司需要，開始學(xué)習(xí)angular，這個傳聞中學(xué)習(xí)曲線及其陡峭的前端框架，并開始寫第一個用angular的項目，截止今天初步完成現(xiàn)有需求，顧在此做一次遇到問題的總結(jié)，以便知識的掌握。

仲巴ssl適用于網(wǎng)站、小程序/APP、API接口等需要進行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

一、在angular項目中，如何使用錨點

在常規(guī)項目中，使用錨點用來做"智能"定位效果時，只需這么寫：

<a href="#test" rel="external nofollow" >走你</a>
<div id="test">被定位區(qū)域</div>

但是在ng中，a標(biāo)簽中的href屬性會自動的使用路由機制，最后的結(jié)果會被當(dāng)成跳轉(zhuǎn)的路由地址，具體的原因有待進一步考證，反正最后的結(jié)果就是上面的寫法不生效，生效寫法：

<a router="./" [fragment]="test">來吧</a>
<div id="test">被定位區(qū)域</div>

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

之前中vue寫項目的時候，會遇到組件風(fēng)格與第三方UI庫沖突的現(xiàn)象，用過vue的同學(xué)都了解，在vue中有個scoped這個作用域的概念，如果要自定義與UI庫沖突的地方有以下幾種方式：

• 在App.vue文件中聲名樣式；
• 在子組件中添加多個style標(biāo)簽；
• 使用深度作用選擇器—— '>>>';
  • scss：.a /deep/ .b {...}
  • stylus: .a <<< .b{...}

那么在ng中個什么情況呢？首先需要了解ng渲染組件的機制，在ng中有一個東東叫showDOM；

解決方法:

在組件的.ts文件中

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

@Commpoent({
  ...
  encapsulation: ViewEncapsulation.None
})

如果這樣還是覆蓋不了，那就查查類名拼寫啊、層級嵌套啊、和類名的位置，我曾經(jīng)就是因為把類名加的位置不對導(dǎo)致樣式不生效的，大家不要學(xué)我喲！

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

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上沒有，或者由于各種版本問題，導(dǎo)致使用的時候會有亂七八糟的bug，找原因，去解決，費時費力；

用了ng才能明白，以前用vue的時候是多么的幸福，使用vue常規(guī)業(yè)務(wù)在國內(nèi)基本都是即搜即用，ng就。。。嗯，學(xué)英語ing~。
解決方案:

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

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

五、監(jiān)聽滾動事件

使用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);
    })
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁名稱：淺談Angular7項目開發(fā)總結(jié)
分享鏈接：http://chinadenli.net/article16/jpcpdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、自適應(yīng)網(wǎng)站、微信小程序、網(wǎng)站設(shè)計、云服務(wù)器、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)