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

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

相關推薦：2022年大前端面試題總結（收藏）

關於Angular CLI

Angular CLI又稱Angular腳手架，用於快速生成專案或組件的框架以提高效率。可以方便的生成angular app、component、service 等等， 並且可以透過參數，按照自己的需求去建立。可以說是angular開發必備的利器。 【相關教學推薦：《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提供了一種平滑的機制，透過它我們可以將這些依賴項注入我們的元件和指令中。因此，我們只是在建立依賴關係，這些依賴關係可以在應用程式的所有元件之間注入。

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

1. 不需要實例化，（new 實例）。不需要關心class的建構函式裡需要什麼參數
2. 一次注入（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+面試題整理之：基礎知識點解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！