這篇文章主要介紹了Angular的經(jīng)典面試題有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的永修網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
Angular 2組件/指令具有生命周期事件，是由@angular/core管理的。@angular/core會創(chuàng)建組件，渲染它，創(chuàng)建并呈現(xiàn)它的后代。當(dāng)@angular/core的數(shù)據(jù)綁定屬性更改時，處理就會更改，在從DOM中刪除其模板之前，就會銷毀掉它。Angular提供了一組生命周期hooks（特殊事件），可以被分接到生命周期中，并在需要時執(zhí)行操作。構(gòu)造函數(shù)會在所有生命周期事件之前執(zhí)行。每個接口都有一個前綴為ng的hook方法。例如，ngOnint界面的OnInit方法，這個方法必須在組件中實現(xiàn)。
一部分事件適用于組件/指令，而少數(shù)事件只適用于組件。
ngOnChanges：當(dāng)Angular設(shè)置其接收當(dāng)前和上一個對象值的數(shù)據(jù)綁定屬性時響應(yīng)。
ngOnInit：在第一個ngOnChange觸發(fā)器之后，初始化組件/指令。這是最常用的方法，用于從后端服務(wù)檢索模板的數(shù)據(jù)。
ngDoCheck：檢測并在Angular上下文發(fā)生變化時執(zhí)行。每次更改檢測運行時，會被調(diào)用。
ngOnDestroy：在Angular銷毀指令/組件之前清除。取消訂閱可觀察的對象并脫離事件處理程序，以避免內(nèi)存泄漏。
組件特定hooks：
ngAfterContentInit：組件內(nèi)容已初始化完成
ngAfterContentChecked：在Angular檢查投影到其視圖中的綁定的外部內(nèi)容之后。
ngAfterViewInit：Angular創(chuàng)建組件的視圖后。
ngAfterViewChecked：在Angular檢查組件視圖的綁定之后。
Angular 2是一個平臺，不僅是一種語言
更好的速度和性能
更簡單的依賴注入
模塊化，跨平臺
具備ES6和Typescript的好處。
靈活的路由，具備延遲加載功能
更容易學(xué)習(xí)
路由是能夠讓用戶在視圖/組件之間導(dǎo)航的機制。Angular 2簡化了路由，并提供了在模塊級（延遲加載）下配置和定義的靈活性。
Angular應(yīng)用程序具有路由器服務(wù)的單個實例，并且每當(dāng)URL改變時，相應(yīng)的路由就與路由配置數(shù)組進行匹配。在成功匹配時，它會應(yīng)用重定向，此時路由器會構(gòu)建ActivatedRoute對象的樹，同時包含路由器的當(dāng)前狀態(tài)。在重定向之前，路由器將通過運行保護（CanActivate）來檢查是否允許新的狀態(tài)。Route Guard只是路由器運行來檢查路由授權(quán)的接口方法。保護運行后，它將解析路由數(shù)據(jù)并通過將所需的組件實例化到
擴展閱讀：
https://www.codeproject.com/Articles/1164813/Angular-Routing
https://vsavkin.com/angular-2-router-d9e30599f9ea#.kt4z1v957
Angular 2不具有雙向digest cycle，這是與Angular 1不同的。在Angular2中，組件中發(fā)生的任何改變總是從當(dāng)前組件傳播到其所有子組件中。如果一個子組件的更改需要反映到其父組件的層次結(jié)構(gòu)中，我們可以通過使用事件發(fā)射器api來發(fā)出事件。
簡而言之，EventEmitter是在@ angular/core模塊中定義的類，由組件和指令使用，用來發(fā)出自定義事件。
@output() somethingChanged = new EventEmitter();
我們使用somethingChanged.emit（value）方法來發(fā)出事件。這通常用在setter中，當(dāng)類中的值被更改完成時。
可以通過模塊的任何一個組件，使用訂閱方法來實現(xiàn)事件發(fā)射的訂閱。
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
所有企業(yè)應(yīng)用程序都會遵循一組編碼慣例和準(zhǔn)則，以更好的方式維護代碼。Codelyzer是一個開源工具，用于運行和檢查是否遵循了預(yù)定義的編碼準(zhǔn)則。Codelyzer僅對Angular和TypeScript項目進行靜態(tài)代碼分析。
Codelyzer運行在tslint的頂部，其編碼約定通常在tslint.json文件中定義。Codelyzer可以直接通過Angularcli或npm運行。像Visual Studio Code和Atom這樣的編輯器也支持codelyzer，只需要通過做一個基本的設(shè)置就能實現(xiàn)。
要在Visual Studio代碼中設(shè)置codelyzer，我們可以在文件 - >選項 - >用戶設(shè)置中添加tslint規(guī)則的路徑。
重慶分公司
重慶分公司
{
"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
大多數(shù)企業(yè)應(yīng)用程序包含用各式各樣的用于特定業(yè)務(wù)案例的模塊。捆綁整個應(yīng)用程序代碼并完成加載，會在初始調(diào)用時，產(chǎn)生巨大的性能開銷。延遲加載使我們只加載用戶正在交互的模塊，而其余的模塊會在運行時按需加載。
延遲加載通過將代碼拆分成多個包并以按需加載的方式，來加速應(yīng)用程序初始加載過程。
每個Angular應(yīng)用程序必須有一個叫AppModule的主模塊。代碼應(yīng)該根據(jù)應(yīng)用程序業(yè)務(wù)案例分為不同的子模塊（NgModule）。
啟用延遲加載的Plunkr示例：
我們不需要在根模塊中導(dǎo)入或聲明延遲加載模塊。
將路由添加到頂層路由（app.routing.ts）并設(shè)置loadChildren。loadChildren會從根文件夾中獲取絕對路徑。RouterModule.forRoot（）會獲取routes數(shù)組并配置路由器。
在子模塊中導(dǎo)入模塊特定路由。
在子模塊路由中，將路徑指定為空字符串“”，也就是空路徑。RouterModule.forChild會再次采用路由數(shù)組為子模塊組件加載并配置路由器。
然后，導(dǎo)出const路由：ModuleWithProviders = RouterModule.forChild（routes）;
就像任何其他客戶端或Web應(yīng)用程序一樣，Angular 2應(yīng)用程序也應(yīng)該遵循一些基本準(zhǔn)則來減輕安全風(fēng)險。其中一些是：
避免為你的組件使用/注入動態(tài)HTML內(nèi)容。
如果使用外部HTML，也就是來自數(shù)據(jù)庫或應(yīng)用程序之外的地方，那么就需要清理它。
不要將外部網(wǎng)址放在應(yīng)用程序中，除非它是受信任的。避免網(wǎng)址重定向，除非它是可信的。
考慮使用AOT編譯或離線編譯。
通過限制api，選擇使用已知或安全環(huán)境/瀏覽器的app來防止XSRF攻擊。
擴展閱讀：https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices
優(yōu)化取決于應(yīng)用程序的類型和大小以及許多其他因素。但一般來說，在優(yōu)化Angular 2應(yīng)用程序時，我會考慮以下幾點：
考慮AOT編譯。
確保應(yīng)用程序已經(jīng)經(jīng)過了捆綁，uglify和tree shaking。
確保應(yīng)用程序不存在不必要的import語句。
確保應(yīng)用中已經(jīng)移除了不使用的第三方庫。
所有dependencies 和dev-dependencies都是明確分離的。
如果應(yīng)用程序較大時，我會考慮延遲加載而不是完全捆綁的應(yīng)用程序。
擴展閱讀：
https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294#.pw4m2srmr
https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/
在大多數(shù)的情況下，第三方庫都帶有它的.d.ts 文件，用于類型定義。在某些情況下，我們需要通過向現(xiàn)有類型提供一些更多的屬性來擴展現(xiàn)有類型，或者如果我們需要定義其它類型以避免TypeScript警告。
如果我們需要擴展外部庫的類型定義，一個好的做法是，我們并非對node_modules或現(xiàn)有的typings文件夾進行改動，而是創(chuàng)建一個命名為“自定義類型”的新文件夾，來存儲所有的自定義類型。
要定義應(yīng)用程序（JavaScript / Typescript）對象的類型，我們應(yīng)該在應(yīng)用程序相應(yīng)模塊的models文件夾中，定義接口和實體類。
對于這些情況，我們可以通過創(chuàng)建我們自己的“ .d.ts”文件來實現(xiàn)定義或擴展類型。
擴展閱讀：
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
Shadow DOM是HTML規(guī)范的一部分，它允許開發(fā)人員封裝自己的HTML標(biāo)記，CSS樣式和JavaScript。Shadow DOM以及其它一些技術(shù)，使開發(fā)人員能夠像
因為shadow DOM本質(zhì)上是靜態(tài)的，同時也是開發(fā)人員無法訪問的，所以它是一個很好的候選對象。因為它緩存的DOM將在瀏覽器中呈現(xiàn)得更快，并提供更好的性能。此外，還可以相對很好地管理shadow DOM，同時檢測Angular 2應(yīng)用的改變，并且可以有效地管理視圖的重新繪制。
擴展閱讀：
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966
AOT編譯代表的是Ahead Of Time編譯，其中Angular編譯器在構(gòu)建時，會將Angular組件和模板編譯為本機JavaScript和HTML。編譯好的HTML和JavaScript將會部署到Web服務(wù)器，以便瀏覽器可以節(jié)省編譯和渲染時間。
優(yōu)點：
更快的下載：由于應(yīng)用程序已經(jīng)編譯，許多Angular編譯器相關(guān)庫就不再需要捆綁，應(yīng)用程序包變得更小，所以該應(yīng)用程序可以更快地下載。
更少的Http請求數(shù)：如果應(yīng)用程序沒有捆綁來支持延遲加載（或任何原因），對于每個關(guān)聯(lián)的HTML和CSS，都會有一個單獨的服務(wù)器請求。但是預(yù)編譯的應(yīng)用程序會將所有模板和樣式與組件對齊，因此到服務(wù)器的Http請求數(shù)量會更少。
更快的渲染：如果應(yīng)用程序不是AOT編譯，那么應(yīng)用程序完全加載時，編譯過程會發(fā)生在瀏覽器中。這需要等待下載所有必需的組件，然后等待編譯器花費時間來編譯應(yīng)用程序。使用AOT編譯，就能實現(xiàn)優(yōu)化。
在構(gòu)建時檢測錯誤：由于預(yù)先編譯，可以檢測到許多編譯時錯誤，能夠為應(yīng)用程序提供更好的穩(wěn)定性。
缺點：
僅適用于HTML和CSS，其它文件類型需要前面的構(gòu)建步驟
沒有watch模式，必須手動完成（bin / ngc-watch.js）并編譯所有文件
需要維護AOT版本的bootstrap文件（使用cli等工具時不需要）
在編譯之前，需要清理步驟
擴展閱讀：https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML
從堆棧溢出就是一個區(qū)別：
當(dāng)異步操作完成或失敗時，Promise會處理一個單個事件。
Observable類似于（在許多語言中的）Stream，當(dāng)每個事件調(diào)用回調(diào)函數(shù)時，允許傳遞零個或多個事件。通常Observable比Promise更受歡迎，因為它不但提供了Promise特性，還提供了其它特性。使用Observable可以處理0,1或多個事件。你可以在每種情況下使用相同的API。Observable是可取消的，這相比于Promise也具有優(yōu)勢。如果服務(wù)器的HTTP請求結(jié)果或其它一些異步操作不再需要，則Observable的訂閱者可以取消訂閱，而Promise將最終調(diào)用成功或失敗的回調(diào)，即使你不需要通知或其提供的結(jié)果。Observable提供像map，forEach，reduce之類的類似于數(shù)組的運算符，還有強大的運算符，如retry（）或replay（）等，使用起來是相當(dāng)方便的。
Promises vs Observables
Promises：
1、返回單個值
2、不可取消
Observables：
1、可以使用多個值
2、可取消
3、支持map，filter，reduce和類似的操作符
4、ES 2016提議的功能
5、使用反應(yīng)式擴展（RxJS）
6、根據(jù)時間的變化，數(shù)組成員可以異步獲取
目前Angular 2正式版已經(jīng)發(fā)布，部分產(chǎn)品也已經(jīng)對Angular 2正式版進行了支持。其中，反應(yīng)最為迅速的就是Wijmo，Wijmo 在 Angular2 發(fā)布幾個小時后就發(fā)布了支持 Angular2 正式版本的 Wijmo。Wijmo 為每一個UI控件都提供了 Angular2 組件。所有 Angular2 組件都提供了完全聲明性標(biāo)記。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular的經(jīng)典面試題有哪些”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
