淺談Angular的12個經典問題

Posted on by

1. 請解釋Angular 2應用程序的生命周期hooks是什麼？

Angular 2組件/指令具有生命周期事件，是由@angular/core管理的。@angular/core會創建組件，渲染它，創建並呈現它的後代。當@angular/core的數據綁定屬性更改時，處理就會更改，在從DOM中刪除其模板之前，就會銷毀掉它。Angular提供瞭一組生命周期hooks（特殊事件），可以被分接到生命周期中，並在需要時執行操作。構造函數會在所有生命周期事件之前執行。每個接口都有一個前綴為ng的hook方法。例如，ngOnint界面的OnInit方法，這個方法必須在組件中實現。

一部分事件適用於組件/指令，而少數事件隻適用於組件。

  • ngOnChanges：當Angular設置其接收當前和上一個對象值的數據綁定屬性時響應。
  • ngOnInit：在第一個ngOnChange觸發器之後，初始化組件/指令。這是最常用的方法，用於從後端服務檢索模板的數據。
  • ngDoCheck：檢測並在Angular上下文發生變化時執行。每次更改檢測運行時，會被調用。
  • ngOnDestroy：在Angular銷毀指令/組件之前清除。取消訂閱可觀察的對象並脫離事件處理程序，以避免內存泄漏。

組件特定hooks：

  • ngAfterContentInit：組件內容已初始化完成
  • ngAfterContentChecked：在Angular檢查投影到其視圖中的綁定的外部內容之後。
  • ngAfterViewInit：Angular創建組件的視圖後。
  • ngAfterViewChecked：在Angular檢查組件視圖的綁定之後。

2. 使用Angular 2，和使用Angular 1相比，有什麼優勢？

1.Angular 2是一個平臺，不僅是一種語言

2.更好的速度和性能

3.更簡單的依賴註入

4.模塊化，跨平臺

5.具備ES6和Typescript的好處。

6.靈活的路由，具備延遲加載功能

7.更容易學習

3. Angular 2中的路由工作原理是什麼？

路由是能夠讓用戶在視圖/組件之間導航的機制。Angular 2簡化瞭路由，並提供瞭在模塊級（延遲加載）下配置和定義的靈活性。

Angular應用程序具有路由器服務的單個實例，並且每當URL改變時，相應的路由就與路由配置數組進行匹配。在成功匹配時，它會應用重定向，此時路由器會構建ActivatedRoute對象的樹，同時包含路由器的當前狀態。在重定向之前，路由器將通過運行保護（CanActivate）來檢查是否允許新的狀態。Route Guard隻是路由器運行來檢查路由授權的接口方法。保護運行後，它將解析路由數據並通過將所需的組件實例化到<router-outlet> </ router-outlet>中來激活路由器狀態。

擴展閱讀：

https://www.codeproject.com/Articles/1164813/Angular-Routing

https://vsavkin.com/angular-2-router-d9e30599f9ea

4. 什麼是事件發射器？它是如何在Angular 2中工作的？

Angular2不具有雙向digest cycle，這是與Angular1不同的。在Angular2中，組件中發生的任何改變總是從當前組件傳播到其所有子組件中。如果一個子組件的更改需要反映到其父組件的層次結構中，我們可以通過使用事件發射器api來發出事件。

簡而言之，EventEmitter是在@ angular/core模塊中定義的類，由組件和指令使用，用來發出自定義事件。

@output() somethingChanged = new EventEmitter();

我們使用somethingChanged.emit（value）方法來發出事件。這通常用在setter中，當類中的值被更改完成時。

可以通過模塊的任何一個組件，使用訂閱方法來實現事件發射的訂閱。

myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));

擴展閱讀：

http://stackoverflow.com/questions/36076700/what-is-the-proper-use-of-an-eventemitter

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML

5. 如何在Angular 2應用程序中使用codelyzer？

所有企業應用程序都會遵循一組編碼慣例和準則，以更好的方式維護代碼。Codelyzer是一個開源工具，用於運行和檢查是否遵循瞭預定義的編碼準則。Codelyzer僅對Angular和TypeScript項目進行靜態代碼分析。

Codelyzer運行在tslint的頂部，其編碼約定通常在tslint.json文件中定義。Codelyzer可以直接通過Angularcli或npm運行。像Visual Studio Code和Atom這樣的編輯器也支持codelyzer，隻需要通過做一個基本的設置就能實現。

要在Visual Studio代碼中設置codelyzer，我們可以在文件 – >選項 – >用戶設置中添加tslint規則的路徑。

{

    "tslint.rulesDirectory": "./node_modules/codelyzer",

    "typescript.tsdk": "node_modules/typescript/lib"

}

從cli中運行的代碼：ng lint。

從npm中運行的代碼：npm run lint

擴展閱讀：

https://github.com/mgechev/codelyzer

https://www.youtube.com/watch?v=bci-Z6nURgE

6. 什麼是延遲加載？如何在Angular 2中啟用延遲加載？

大多數企業應用程序包含用各式各樣的用於特定業務案例的模塊。捆綁整個應用程序代碼並完成加載，會在初始調用時，產生巨大的性能開銷。延遲加載使我們隻加載用戶正在交互的模塊，而其餘的模塊會在運行時按需加載。

延遲加載通過將代碼拆分成多個包並以按需加載的方式，來加速應用程序初始加載過程。

每個Angular應用程序必須有一個叫AppModule的主模塊。代碼應該根據應用程序業務案例分為不同的子模塊（NgModule）。

啟用延遲加載的Plunkr示例：

1.我們不需要在根模塊中導入或聲明延遲加載模塊。

2.將路由添加到頂層路由（app.routing.ts）並設置loadChildren。loadChildren會從根文件夾中獲取絕對路徑。RouterModule.forRoot（）會獲取routes數組並配置路由器。

3.在子模塊中導入模塊特定路由。

4.在子模塊路由中，將路徑指定為空字符串“”，也就是空路徑。RouterModule.forChild會再次采用路由數組為子模塊組件加載並配置路由器。

5.然後，導出const路由：ModuleWithProviders= RouterModule.forChild（routes）;

7. 在Angular 2應用中，我們應該註意哪些安全威脅？

就像任何其他客戶端或Web應用程序一樣，Angular 2應用程序也應該遵循一些基本準則來減輕安全風險。其中一些是：

1.避免為你的組件使用/註入動態HTML內容。

2.如果使用外部HTML，也就是來自數據庫或應用程序之外的地方，那麼就需要清理它。

3.不要將外部網址放在應用程序中，除非它是受信任的。避免網址重定向，除非它是可信的。

4.考慮使用AOT編譯或離線編譯。

5.通過限制api，選擇使用已知或安全環境/瀏覽器的app來防止XSRF攻擊。

擴展閱讀：https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices

8. 如何優化Angular 2應用程序來獲得更好的性能？

優化取決於應用程序的類型和大小以及許多其他因素。但一般來說，在優化Angular 2應用程序時，我會考慮以下幾點：

1.考慮AOT編譯。

2.確保應用程序已經經過瞭捆綁，uglify和tree shaking。

3.確保應用程序不存在不必要的import語句。

4.確保應用中已經移除瞭不使用的第三方庫。

5.所有dependencies和dev-dependencies都是明確分離的。

6.如果應用程序較大時，我會考慮延遲加載而不是完全捆綁的應用程序。

擴展閱讀：

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

Angular 2 Best Practices: Change Detector Performance

9. 如何實現不出現編輯器警告的自定義類型？

在大多數的情況下，第三方庫都帶有它的.d.ts文件，用於類型定義。在某些情況下，我們需要通過向現有類型提供一些更多的屬性來擴展現有類型，或者如果我們需要定義其它類型以避免TypeScript警告。

如果我們需要擴展外部庫的類型定義，一個好的做法是，我們並非對node_modules或現有的typings文件夾進行改動，而是創建一個命名為“自定義類型”的新文件夾，來存儲所有的自定義類型。

要定義應用程序（JavaScript / Typescript）對象的類型，我們應該在應用程序相應模塊的models文件夾中，定義接口和實體類。

對於這些情況，我們可以通過創建我們自己的“.d.ts”文件來實現定義或擴展類型。

擴展閱讀：

https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML

https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files

http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file

10. 什麼是Shadow DOM？它如何幫助Angular 2更好地執行？

Shadow DOM是HTML規范的一部分，它允許開發人員封裝自己的HTML標記，CSS樣式和JavaScript。Shadow DOM以及其它一些技術，使開發人員能夠像<audio>標簽一樣構建自己的一級標簽，Web組件和API。總的來說，這些新的標簽和API被稱為Web組件。Shadow DOM通過提供瞭更好的關註分離，通過其它的HTML DOM元素實現瞭更少的樣式與腳本的沖突。

因為shadow DOM本質上是靜態的，同時也是開發人員無法訪問的，所以它是一個很好的候選對象。因為它緩存的DOM將在瀏覽器中呈現得更快，並提供更好的性能。此外，還可以相對很好地管理shadow DOM，同時檢測Angular 2應用的改變，並且可以有效地管理視圖的重新繪制。

擴展閱讀：

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

What the Heck is Shadow DOM?

https://code.tutsplus.com/tutorials/intro-to-shadow-dom–net-34966

11. 什麼是AOT編譯？它有什麼優缺點？

AOT編譯代表的是Ahead Of Time編譯，其中Angular編譯器在構建時，會將Angular組件和模板編譯為本機JavaScript和HTML。編譯好的HTML和JavaScript將會部署到Web服務器，以便瀏覽器可以節省編譯和渲染時間。

優點：

1.更快的下載：由於應用程序已經編譯，許多Angular編譯器相關庫就不再需要捆綁，應用程序包變得更小，所以該應用程序可以更快地下載。

2.更少的Http請求數：如果應用程序沒有捆綁來支持延遲加載（或任何原因），對於每個關聯的HTML和CSS，都會有一個單獨的服務器請求。但是預編譯的應用程序會將所有模板和樣式與組件對齊，因此到服務器的Http請求數量會更少。

3.更快的渲染：如果應用程序不是AOT編譯，那麼應用程序完全加載時，編譯過程會發生在瀏覽器中。這需要等待下載所有必需的組件，然後等待編譯器花費時間來編譯應用程序。使用AOT編譯，就能實現優化。在

4.構建時檢測錯誤：由於預先編譯，可以檢測到許多編譯時錯誤，能夠為應用程序提供更好的穩定性。

缺點：

1.僅適用於HTML和CSS，其它文件類型需要前面的構建步驟

2.沒有watch模式，必須手動完成（bin / ngc-watch.js）並編譯所有文件

3.需要維護AOT版本的bootstrap文件（使用cli等工具時不需要）

4.在編譯之前，需要清理步驟

擴展閱讀：https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML

12. Observables和Promises的核心區別是什麼？

從堆棧溢出就是一個區別：

當異步操作完成或失敗時，Promise會處理一個單個事件。

Observable類似於（在許多語言中的）Stream，當每個事件調用回調函數時，允許傳遞零個或多個事件。通常Observable比Promise更受歡迎，因為它不但提供瞭Promise特性，還提供瞭其它特性。使用Observable可以處理0,1或多個事件。你可以在每種情況下使用相同的API。Observable是可取消的，這相比於Promise也具有優勢。如果服務器的HTTP請求結果或其它一些異步操作不再需要，則Observable的訂閱者可以取消訂閱，而Promise將最終調用成功或失敗的回調，即使你不需要通知或其提供的結果。Observable提供像map，forEach，reduce之類的類似於數組的運算符，還有強大的運算符，如retry（）或replay（）等，使用起來是相當方便的。

Promises vs Observables

Promises：

1.返回單個值

2.不可取消

Observables：

1.可以使用多個值

2.可取消

3.支持map，filter，reduce和類似的操作符

4.ES 2016提議的功能

5.使用反應式擴展（RxJS）

6.根據時間的變化，數組成員可以異步獲取

目前Angular 2正式版已經發佈，部分產品也已經對Angular 2正式版進行瞭支持。其中，反應最為迅速的就是Wijmo，Wijmo在 Angular2 發佈幾個小時後就發佈瞭支持 Angular2 正式版本的 Wijmo。Wijmo 為每一個UI控件都提供瞭 Angular2 組件。所有 Angular2 組件都提供瞭完全聲明性標記。

原文鏈接：https://www.codeproject.com/Articles/1169073/Angular-Interview-Questions

自查小測驗

對Angular的知識瞭解到這裡，你是否也想知道自己到底掌握的如何呢？感興趣的同學，可以嘗試構建一個“答題系統應用程序”，具體要求為：

  • 有三個組成部分：測試視圖、審查結果和顯示結果
  • 接受json格式的提問問題，你可以以預定義的格式從服務器發送json，Angular2測試應用需要在客戶端呈現出答題界面

成品界面如下：

演示效果：http://ng2-quiz.anuraggandhi.com/

答案在這裡（實現代碼）：https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular

以上就是淺談Angular的12個經典問題的詳細內容，更多關於Angular的12個經典問題的資料請關註WalkonNet其它相關文章！

推薦閱讀：