Angular作為目前最為流行的前端框架，受到了前端開發者的普遍歡迎。不論是初學Angular的新手，還是有一定Angular開發經驗的開發者，瞭解本文中的12個經典面試問題，都將會是一個深入瞭解和學習Angular 2的知識概念的絕佳途徑。

在文中，我們將會接觸到很多Angular 2的重要概念，並附擴充套件閱讀資料和自查小測試，供大家評估自己對Angular的瞭解程度。

Angular 經典面試問題及擴充套件閱讀

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只是路由器執行來檢查路由授權的介面方法。保護執行後，它將解析路由資料並透過將所需的元件例項化到 中來啟用路由器狀態。

擴充套件閱讀：

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

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

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

@output() somethingChanged = new EventEmitter();

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

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

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

擴充套件閱讀：

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

擴充套件閱讀：

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. 如果應用程式較大時，我會考慮延遲載入而不是完全捆綁的應用程式。

擴充套件閱讀：

2. https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/

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

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

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

要定義應用程式（JavaScript / Typescript）物件的型別，我們應該在應用程式相應模組的models資料夾中，定義介面和實體類。

對於這些情況，我們可以透過建立我們自己的“ .d.ts”檔案來實現定義或擴充套件型別。

擴充套件閱讀：

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

Shadow DOM是HTML規範的一部分，它允許開發人員封裝自己的HTML標記，CSS樣式和JavaScript。Shadow DOM以及其它一些技術，使開發人員能夠像標籤一樣構建自己的一級標籤，Web元件和API。總的來說，這些新的標籤和API被稱為Web元件。Shadow DOM透過提供了更好的關注分離，透過其它的HTML DOM元素實現了更少的樣式與指令碼的衝突。

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

擴充套件閱讀：

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

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. 在編譯之前，需要清理步驟

擴充套件閱讀：

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， 在 Angular2 釋出幾個小時後就釋出了支援 Angular2 正式版本的 Wijmo。Wijmo 為每一個UI控制元件都提供了 Angular2 元件。所有 Angular2 元件都提供了完全宣告性標記。

原文連結：

自查小測驗

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

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

成品介面如下：

演示效果：

答案在這裡（實現程式碼）：

也歡迎大家在文末留言，交流Angular的使用經驗哦！