12個(gè)關(guān)于Angular的經(jīng)典面試題

封面圖

Angular作為目前最為流行的前端框架，受到了前端開發(fā)者的普遍歡迎。不論是初學(xué)Angular的新手，還是有一定Angular開發(fā)經(jīng)驗(yàn)的開發(fā)者，了解本文中的12個(gè)經(jīng)典面試問題，都將會(huì)是一個(gè)深入了解和學(xué)習(xí)Angular 2的知識(shí)概念的絕佳途徑。

在文中，我們將會(huì)接觸到很多Angular 2的重要概念，并附擴(kuò)展閱讀資料和自查小測(cè)試，供大家評(píng)估自己對(duì)Angular的了解程度。

相關(guān)教程推薦：《angular教程》

Angular 經(jīng)典問題及擴(kuò)展閱讀

1. 請(qǐng)解釋Angular 2應(yīng)用程序的生命周期hooks是什么？

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

一部分事件適用于組件/指令，而少數(shù)事件只適用于組件。

  • ngOnChanges：當(dāng)Angular設(shè)置其接收當(dāng)前和上一個(gè)對(duì)象值的數(shù)據(jù)綁定屬性時(shí)響應(yīng)。
  • ngOnInit：在第一個(gè)ngOnChange觸發(fā)器之后，初始化組件/指令。這是最常用的方法，用于從后端服務(wù)檢索模板的數(shù)據(jù)。
  • ngDoCheck：檢測(cè)并在Angular上下文發(fā)生變化時(shí)執(zhí)行。每次更改檢測(cè)運(yùn)行時(shí)，會(huì)被調(diào)用。
  • ngOnDestroy：在Angular銷毀指令/組件之前清除。取消訂閱可觀察的對(duì)象并脫離事件處理程序，以避免內(nèi)存泄漏。

組件特定hooks：

  • ngAfterContentInit：組件內(nèi)容已初始化完成
  • ngAfterContentChecked：在Angular檢查投影到其視圖中的綁定的外部?jī)?nèi)容之后。
  • ngAfterViewInit：Angular創(chuàng)建組件的視圖后。
  • ngAfterViewChecked：在Angular檢查組件視圖的綁定之后。

2. 使用Angular 2，和使用Angular 1相比，有什么優(yōu)勢(shì)？

  • Angular 2是一個(gè)平臺(tái)，不僅是一種語言

  • 更好的速度和性能

  • 更簡(jiǎn)單的依賴注入

  • 模塊化，跨平臺(tái)

  • 具備ES6和Typescript的好處。

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

  • 更容易學(xué)習(xí)

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

路由是能夠讓用戶在視圖/組件之間導(dǎo)航的機(jī)制。Angular 2簡(jiǎn)化了路由，并提供了在模塊級(jí)（延遲加載）下配置和定義的靈活性。

Angular應(yīng)用程序具有路由器服務(wù)的單個(gè)實(shí)例，并且每當(dāng)URL改變時(shí)，相應(yīng)的路由就與路由配置數(shù)組進(jìn)行匹配。在成功匹配時(shí)，它會(huì)應(yīng)用重定向，此時(shí)路由器會(huì)構(gòu)建ActivatedRoute對(duì)象的樹，同時(shí)包含路由器的當(dāng)前狀態(tài)。在重定向之前，路由器將通過運(yùn)行保護(hù)（CanActivate）來檢查是否允許新的狀態(tài)。Route Guard只是路由器運(yùn)行來檢查路由授權(quán)的接口方法。保護(hù)運(yùn)行后，它將解析路由數(shù)據(jù)并通過將所需的組件實(shí)例化到<router-outlet> </ router-outlet>中來激活路由器狀態(tài)。

擴(kuò)展閱讀：

4. 什么是事件發(fā)射器？它是如何在Angular 2中工作的？

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

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

@output() somethingChanged = new EventEmitter();

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

可以通過模塊的任何一個(gè)組件，使用訂閱方法來實(shí)現(xiàn)事件發(fā)射的訂閱。

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

擴(kuò)展閱讀：

5. 如何在Angular 2應(yīng)用程序中使用codelyzer？

所有企業(yè)應(yīng)用程序都會(huì)遵循一組編碼慣例和準(zhǔn)則，以更好的方式維護(hù)代碼。Codelyzer是一個(gè)開源工具，用于運(yùn)行和檢查是否遵循了預(yù)定義的編碼準(zhǔn)則。Codelyzer僅對(duì)Angular和TypeScript項(xiàng)目進(jìn)行靜態(tài)代碼分析。

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

要在Visual Studio代碼中設(shè)置codelyzer，我們可以在文件 - >選項(xiàng) - >用戶設(shè)置中添加tslint規(guī)則的路徑。

{

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

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

}

從cli中運(yùn)行的代碼：ng lint。

從npm中運(yùn)行的代碼： npm run lint

擴(kuò)展閱讀：

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

大多數(shù)企業(yè)應(yīng)用程序包含用各式各樣的用于特定業(yè)務(wù)案例的模塊。捆綁整個(gè)應(yīng)用程序代碼并完成加載，會(huì)在初始調(diào)用時(shí)，產(chǎn)生巨大的性能開銷。延遲加載使我們只加載用戶正在交互的模塊，而其余的模塊會(huì)在運(yùn)行時(shí)按需加載。

延遲加載通過將代碼拆分成多個(gè)包并以按需加載的方式，來加速應(yīng)用程序初始加載過程。

每個(gè)Angular應(yīng)用程序必須有一個(gè)叫AppModule的主模塊。代碼應(yīng)該根據(jù)應(yīng)用程序業(yè)務(wù)案例分為不同的子模塊（NgModule）。

啟用延遲加載的Plunkr示例：

  • 我們不需要在根模塊中導(dǎo)入或聲明延遲加載模塊。

  • 將路由添加到頂層路由（app.routing.ts）并設(shè)置loadChildren。loadChildren會(huì)從根文件夾中獲取絕對(duì)路徑。RouterModule.forRoot（）會(huì)獲取routes數(shù)組并配置路由器。

  • 在子模塊中導(dǎo)入模塊特定路由。

  • 在子模塊路由中，將路徑指定為空字符串“”，也就是空路徑。RouterModule.forChild會(huì)再次采用路由數(shù)組為子模塊組件加載并配置路由器。

  • 然后，導(dǎo)出const路由：ModuleWithProviders = RouterModule.forChild（routes）;

7. 在Angular 2應(yīng)用中，我們應(yīng)該注意哪些安全威脅？

就像任何其他客戶端或Web應(yīng)用程序一樣，Angular 2應(yīng)用程序也應(yīng)該遵循一些基本準(zhǔn)則來減輕安全風(fēng)險(xiǎn)。其中一些是：

  • 避免為你的組件使用/注入動(dòng)態(tài)HTML內(nèi)容。

  • 如果使用外部HTML，也就是來自數(shù)據(jù)庫或應(yīng)用程序之外的地方，那么就需要清理它。

  • 不要將外部網(wǎng)址放在應(yīng)用程序中，除非它是受信任的。避免網(wǎng)址重定向，除非它是可信的。

  • 考慮使用AOT編譯或離線編譯。

  • 通過限制api，選擇使用已知或安全環(huán)境/瀏覽器的app來防止XSRF攻擊。

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

8. 如何優(yōu)化Angular 2應(yīng)用程序來獲得更好的性能？

優(yōu)化取決于應(yīng)用程序的類型和大小以及許多其他因素。但一般來說，在優(yōu)化Angular 2應(yīng)用程序時(shí)，我會(huì)考慮以下幾點(diǎn)：

  • 考慮AOT編譯。

  • 確保應(yīng)用程序已經(jīng)經(jīng)過了捆綁，uglify和tree shaking。

  • 確保應(yīng)用程序不存在不必要的import語句。

  • 確保應(yīng)用中已經(jīng)移除了不使用的第三方庫。

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

  • 如果應(yīng)用程序較大時(shí)，我會(huì)考慮延遲加載而不是完全捆綁的應(yīng)用程序。

擴(kuò)展閱讀：

9. 如何實(shí)現(xiàn)不出現(xiàn)編輯器警告的自定義類型？

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

如果我們需要擴(kuò)展外部庫的類型定義，一個(gè)好的做法是，我們并非對(duì)node_modules或現(xiàn)有的typings文件夾進(jìn)行改動(dòng)，而是創(chuàng)建一個(gè)命名為“自定義類型”的新文件夾，來存儲(chǔ)所有的自定義類型。

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

對(duì)于這些情況，我們可以通過創(chuàng)建我們自己的“ .d.ts”文件來實(shí)現(xiàn)定義或擴(kuò)展類型。

擴(kuò)展閱讀：

10. 什么是Shadow DOM？它如何幫助Angular 2更好地執(zhí)行？

Shadow DOM是HTML規(guī)范的一部分，它允許開發(fā)人員封裝自己的HTML標(biāo)記，CSS樣式和JavaScript。Shadow DOM以及其它一些技術(shù)，使開發(fā)人員能夠像<audio>標(biāo)簽一樣構(gòu)建自己的一級(jí)標(biāo)簽，Web組件和API?？偟膩碚f，這些新的標(biāo)簽和API被稱為Web組件。Shadow DOM通過提供了更好的關(guān)注分離，通過其它的HTML DOM元素實(shí)現(xiàn)了更少的樣式與腳本的沖突。

因?yàn)閟hadow DOM本質(zhì)上是靜態(tài)的，同時(shí)也是開發(fā)人員無法訪問的，所以它是一個(gè)很好的候選對(duì)象。因?yàn)樗彺娴腄OM將在瀏覽器中呈現(xiàn)得更快，并提供更好的性能。此外，還可以相對(duì)很好地管理shadow DOM，同時(shí)檢測(cè)Angular 2應(yīng)用的改變，并且可以有效地管理視圖的重新繪制。

擴(kuò)展閱讀：

11. 什么是AOT編譯？它有什么優(yōu)缺點(diǎn)？

AOT編譯代表的是Ahead Of Time編譯，其中Angular編譯器在構(gòu)建時(shí)，會(huì)將Angular組件和模板編譯為本機(jī)JavaScript和HTML。編譯好的HTML和JavaScript將會(huì)部署到Web服務(wù)器，以便瀏覽器可以節(jié)省編譯和渲染時(shí)間。

優(yōu)點(diǎn)：

  • 更快的下載：由于應(yīng)用程序已經(jīng)編譯，許多Angular編譯器相關(guān)庫就不再需要捆綁，應(yīng)用程序包變得更小，所以該應(yīng)用程序可以更快地下載。

  • 更少的Http請(qǐng)求數(shù)：如果應(yīng)用程序沒有捆綁來支持延遲加載（或任何原因），對(duì)于每個(gè)關(guān)聯(lián)的HTML和CSS，都會(huì)有一個(gè)單獨(dú)的服務(wù)器請(qǐng)求。但是預(yù)編譯的應(yīng)用程序會(huì)將所有模板和樣式與組件對(duì)齊，因此到服務(wù)器的Http請(qǐng)求數(shù)量會(huì)更少。

  • 更快的渲染：如果應(yīng)用程序不是AOT編譯，那么應(yīng)用程序完全加載時(shí)，編譯過程會(huì)發(fā)生在瀏覽器中。這需要等待下載所有必需的組件，然后等待編譯器花費(fèi)時(shí)間來編譯應(yīng)用程序。使用AOT編譯，就能實(shí)現(xiàn)優(yōu)化。

  • 在構(gòu)建時(shí)檢測(cè)錯(cuò)誤：由于預(yù)先編譯，可以檢測(cè)到許多編譯時(shí)錯(cuò)誤，能夠?yàn)閼?yīng)用程序提供更好的穩(wěn)定性。

缺點(diǎn)：

  • 僅適用于HTML和CSS，其它文件類型需要前面的構(gòu)建步驟

  • 沒有watch模式，必須手動(dòng)完成（bin / ngc-watch.js）并編譯所有文件

  • 需要維護(hù)AOT版本的bootstrap文件（使用cli等工具時(shí)不需要）

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

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

12. Observables和Promises的核心區(qū)別是什么？

從堆棧溢出就是一個(gè)區(qū)別：

當(dāng)異步操作完成或失敗時(shí)，Promise會(huì)處理一個(gè)單個(gè)事件。

Observable類似于（在許多語言中的）Stream，當(dāng)每個(gè)事件調(diào)用回調(diào)函數(shù)時(shí)，允許傳遞零個(gè)或多個(gè)事件。通常Observable比Promise更受歡迎，因?yàn)樗坏峁┝薖romise特性，還提供了其它特性。使用Observable可以處理0,1或多個(gè)事件。你可以在每種情況下使用相同的API。Observable是可取消的，這相比于Promise也具有優(yōu)勢(shì)。如果服務(wù)器的HTTP請(qǐng)求結(jié)果或其它一些異步操作不再需要，則Observable的訂閱者可以取消訂閱，而Promise將最終調(diào)用成功或失敗的回調(diào)，即使你不需要通知或其提供的結(jié)果。Observable提供像map，forEach，reduce之類的類似于數(shù)組的運(yùn)算符，還有強(qiáng)大的運(yùn)算符，如retry（）或replay（）等，使用起來是相當(dāng)方便的。

Promises vs Observables

  • Promises：

    1、返回單個(gè)值

    2、不可取消

  • Observables：

    1、可以使用多個(gè)值

    2、可取消

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

    4、ES 2016提議的功能

    5、使用反應(yīng)式擴(kuò)展（RxJS）

    6、根據(jù)時(shí)間的變化，數(shù)組成員可以異步獲取

目前Angular 2正式版已經(jīng)發(fā)布，部分產(chǎn)品也已經(jīng)對(duì)Angular 2正式版進(jìn)行了支持。其中，反應(yīng)最為迅速的就是Wijmo，Wijmo 在 Angular2 發(fā)布幾個(gè)小時(shí)后就發(fā)布了支持 Angular2 正式版本的 Wijmo。Wijmo 為每一個(gè)UI控件都提供了 Angular2 組件。所有 Angular2 組件都提供了完全聲明性標(biāo)記。

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

自查小測(cè)驗(yàn)

對(duì)Angular的知識(shí)了解到這里，你是否也想知道自己到底掌握的如何呢？感興趣的同學(xué)，可以嘗試構(gòu)建一個(gè)“答題系統(tǒng)應(yīng)用程序”，具體要求為：

  • 有三個(gè)組成部分：測(cè)試視圖、審查結(jié)果和顯示結(jié)果
  • 接受json格式的提問問題，你可以以預(yù)定義的格式從服務(wù)器發(fā)送json，Angular2測(cè)試應(yīng)用需要在客戶端呈現(xiàn)出答題界面

成品界面如下：

2.png

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

答案在這里（實(shí)現(xiàn)代碼）：https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular

更多編程相關(guān)知識(shí)，請(qǐng)?jiān)L問：編程教學(xué)??！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容