Angular8+面試題整理之：基礎知識點解析

本篇文章給大家整理分享一些基於8+的面試題，帶大家深入瞭解一下Angular8+的基本知識點，希望對大家有所幫助！

相關推薦：

關於Angular CLI

Angular CLI又稱 Angular腳手架，用於快速生成專案或者元件的框架以提高效率。可以方便的生成angular app、component、service 等等，並且可以通過引數，按照自己的需求去建立。可以說是angular開發必不可少的利器。【相關教學推薦：《》】
參考：https://cli.angular.io/

ng generate: 新建component、service、pipe, class 等
ng new: 新建angular app
ng update: 升級angular自身，以及依賴
ng version：顯示anuglar cli全域性版本、以及原生的angular cli、angular code等的版本
ng add: 新增第三方庫。會做2件事，1）基於npm安裝node_modules, 2）自動更改組態檔，保證新的依賴正常工作

關於angular的依賴注入（dependency injection）

依賴注入是Angular實現的一種應用程式設計模式，是Angular的核心概念之一。

依賴就是具有一系列功能的服務(service)，應用程式中的各種元件和指令（derictives）可能需要服務的功能。 Angular提供了一種平滑的機制，通過它我們可以將這些依賴項注入我們的元件和指令中。因此，我們只是在構建依賴關係，這些依賴關係可以在應用程式的所有元件之間注入。

使用依賴注入還有以下好處，

不需要範例化，（new 範例）。不需要關心class的建構函式裡需要什麼引數
一次注入（app module通過Providers注入），所有元件都可以使用。而且是用同一個service範例（Singleton），也就是說一個service裡的資料是共分享的，可以用於元件間資料傳遞。

關於angular的編譯，AOT和JIT的區別

每個Angular應用程式都包含瀏覽器無法理解的元件和模板。因此，在瀏覽器內部執行之前，需要先編譯所有Angular應用程式。

Angular提供兩種編譯型別：

JIT(Just-in-Time) compilation
AOT(Ahead-of-Time) compilation

區別在於，在JIT編譯中，應用程式在執行時在瀏覽器內部進行編譯；而在AOT編譯中，應用程式在構建期間進行編譯。
顯而易見，AOT編譯好處多多，因而是Angular的預設編譯方式。主要優點

由於應用程式是在瀏覽器內部執行之前進行編譯的，因此瀏覽器會載入可執行程式碼並立即呈現應用程式，從而加快了呈現速度。
在AOT編譯中，編譯器將與應用程式一起傳送外部HTML和CSS檔案，從而消除了對那些原始檔的單獨AJAX請求，從而減少了ajax請求。
開發人員可以在構建階段檢測並處理錯誤，這有助於最大程度地減少錯誤。
AOT編譯器將HTML和模板新增到JS檔案中，然後再在瀏覽器中執行。因此，沒有多餘的HTML檔案可讀取，從而為應用程式提供了更好的安全性。

Angular雙向繫結

Angular雙向繫結的原理

Angular的雙向繫結，通過髒資料檢查（Dirty checking）來實現。

髒值檢測的基本原理是儲存舊數值，並在進行檢測時，把當前時刻的新值和舊值比對。若相等則沒有變化，反之則檢測到變化，需要更新檢視。
angular2中有了Zone.js。對於setTimeout，addEventListener、promise等都在ngZone中執行（換句話說，就是被zone.js封裝重寫了），angular並在ngZone中setup了相應的勾點，通知angular2做相應的髒檢查處理，然後更新DOM。

Angular雙向繫結效率問題

對於頁面中需要繫結DOM元素極其多的情況（成百上千），必然會遇到效率問題。（具體還取決於PC、瀏覽器效能）。另外，髒檢查超過10次（經驗值？），就認為程式有問題，不再進行檢查。
可以採用如下方式避免

對於只用於展示的資料，使用單向繫結，而不是雙向繫結；
Angular的資料流是自頂而下，從父元件到子元件單向流動。單向資料流向保證了高效、可預測的變化檢測。因而元件化也是提高效能的一種手段。
表示式（以及表示式所呼叫的函數）中少寫太過複雜的邏輯
不要連線太長的 pipe（往往 pipe裡都會遍歷並且生成新陣列, pipe 在anglarJS（v1）中叫做filter）
變化檢測策略onPush. Angular有兩種變化檢測策略。Default是Angular預設的變化檢測策略，也就是上述提到的髒檢查（只要有值發生變化，就全部檢查）。開發者可以根據場景來設定更加高效的變化檢測方式：onPush。onPush策略，就是隻有當輸入資料的參照發生變化或者有事件觸發時，元件才進行變化檢測。
NgFor應該伴隨trackBy方程使用。否則，每次髒值檢測過程中，NgFor會把列表裡每一項都執行更新DOM操作。

Angular資料繫結的三種方式

<div>
    <span>Name {{item.name}}</span>  <!-- 1. 直接繫結 -->
    <span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
    <span>Classes {{classes(item)}}</span><!-- 3.繫結方法呼叫的結果 -->
</div>

直接繫結：大多數情況下，這都是效能最好的方式。
繫結方法呼叫的結果：在每個髒值檢測過程中，classes方程都要被呼叫一遍。如果沒有特殊需求，應儘量避免這種使用方式。
pipe方式：它和繫結function類似，每次髒值檢測classPipe都會被呼叫。不過Angular給pipe做了優化，加了快取，如果item和上次相等，則直接返回結果。

更多優化技巧，參考 angular繫結（髒檢查）方面的效能優化技巧

關於angular的Module

什麼是angular的Module

模組(Module)是一個我們可以對元件(Component)，服務(service)和管道(pipe)進行分組的地方。模組通過匯出或隱藏這些元素來決定其他模組是否可以使用元件，指令等。每個模組都使用@NgModule裝飾器定義。

Root Module和Feature Module的區別。

每個Angular應用程式只能有一個根模組(Root Module)，而它可以有一個或多個功能模組(Feature Module)。根模組匯入BrowserModule，而功能模組匯入CommonModule。

Module 延遲載入（Lazy-loading）

當一個專案做得很大後，為了提高首屏載入速度，可以通過Lazy-loading，當存取到某些具體的url時，才載入那些不常用的feature module。

實現：正常建立feature module，修改路由設定。例如：

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

這樣，編譯後，這個feature module就會是一個獨立的js，只有當使用者存取url（~/customers）時，才會向server端請求這個獨立的js，然後載入、執行。

參考https://angular.io/guide/lazy-loading-ngmodules

什麼是指令（Directive）

指令（Directive）用於新增行為到已有元素（DOM）或者元件（Component）。
同時，一個元素或元件，可以應用多個指令。

Promise 和 Observable的區別

首先新版本的anuglar是推薦使用Observable的(屬於RxJS)，其次，對於Observable物件，可以使用.toPromise()轉化為Promise物件。

Promise,無論是否呼叫then。promise都會立即執行；而observables只是被建立，當呼叫(subscribe)的時候才會被執行。
Promise返回一個值；Observable返回0至N個值。所以Promise對應的操作符是.then()，Observable對應的是.subscribe
Observable，還額外支援map，filter，reduce和相似的操作符
Observable 可以取消，Promise不可以

如果提高Angular的效能

Angular也還是網頁應用，所以一般的提高網頁西能的技巧都是通用的。針對Angular，還有一些特殊的優化技巧:

AOT編譯。之前提到過不要在使用者端編譯
應用程式已經最小化（uglify和tree shaking）
去掉不必要的import語句。如果有遺留，那麼打包時也會打進來。
確保應用中已經移除了不使用的第三方庫。同上。
專案較大時，考慮延遲載入(Lazy Loading), 保證首頁的載入速度。

Angular 版本如何升級

Angular CLI提供了升級命令(ng update)，同時，官網（https://update.angular.io/）也有升級指南。選擇從哪個版本升級到哪個版本後，會給出一步一步的升級命令，直接執行就好。

更多程式設計相關知識，請存取：！！

以上就是Angular8+面試題整理之：基礎知識點解析的詳細內容，更多請關注TW511.COM其它相關文章！