Angular8+面試題整理之：基礎知識點解析-js教程-PHP中文網

這篇文章給大家整理分享一些基於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提供了一種平滑的機制，透過它我們可以將這些依賴項注入我們的元件和指令中。因此，我們只是在建立依賴關係，這些依賴關係可以在應用程式的所有元件之間注入。

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

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

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

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

Angular提供兩種編譯類型：

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: &#39;customers&#39;,
    loadChildren: () => import(&#39;./customers/customers.module&#39;).then(m => m.CustomersModule)
  }
];

登入後複製

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

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