解析 Angular 7 的十大特性

Angular 是最流行的 Web 應用程序開發框架之一。隨着 Angular 7 的發佈，它爲 Web 開發人員帶來了更多功能，包括核心框架、Angular Material、與主要版本保持同步的 CLI 和工具鏈，而且還有了幾個主要合做夥伴。

咱們將在本文中介紹 Angular 團隊發佈的一些新功能。Angular 7 主要關注 Ivy 項目，重寫 Angular 編譯器和運行時代碼，讓它變得更小、更好、更快，但 Ivy 還沒有準備好迎接它的黃金時刻。

接下來讓咱們來看看 Angular 7.0 引入的 10 大功能。

1.CLI Prompts

Angular CLI 已經更新到 v7.0.2，添加了一些新功能，好比如今它會在用戶輸入經常使用命令（如 ng-add 或 ng-new）時提示用戶，@angular/material 可用於發現內置功能，如路由或 SCSS 支持。使用 Angular 7 建立新項目時，會默認利用 CLI 中的 Bundle 預算。

2. 應用程序性能

Angular 團隊發現 Angular 開發人員會在生產環境中包含反射元數據 polyfill，但這個 polyfill 只是在開發環境中用到，爲了解決這個問題，v7 的部分更新將自動從 polyfills.ts 文件中將其移除，而後將它做爲 JIT 模式下構建應用程序時的一個構建步驟，默認狀況下在爲生產環境生成構建時刪除這個 polyfill。

爲了提高性能，新的應用程序將在初始捆綁包超過 2MB 時發出警告，並在達到 5MB 時報錯，用戶能夠在 angular.json 文件中修改這些預算值。

3. Angular Material 和 CDK

Angular Material 和 Component Dev Kit（CDK），Angular 7 在 Material Design 方面進行了視覺上的改進，在 2018 年得到了重大更新，帶來了虛擬滾動，用於動態加載和卸載 DOM 的部分元素，以構建高性能的大型數據列表。此外，經過導入 DragDropModule 或 ScrollingModule，應用程序能夠具有拖放功能。

4. 虛擬滾動

虛擬滾動包<cdk-virtual-scroll-viewport>爲對滾動事件作出反應的指令提供了一些輔助。虛擬滾動能夠基於可見部分加載和卸載 DOM 的部分元素。它讓容器元素的高度與要渲染的元素總數的高度保持一致，從而可以高效地模擬正在渲染的全部項目，而後只在視圖中渲染可見項目，爲大型可滾動列表提供了很是快速的用戶體驗。

5. 拖放

@angular/cdk/drag-drop 模塊爲你提供了一種經過聲明性方式建立拖放界面的方法，能夠支持自由拖動、在列表中進行排序、在列表之間轉移項目、動畫、觸摸設備、自定義拖動句柄、預覽和佔位符，以及從新排序列表（moveItemInArray）和在列表之間傳輸項目（transferArrayItem）。

6. Angular 兼容性編譯器（ngcc）

這個編譯器用於將使用 ngc 編譯的 node_modules 轉換爲與新 Ivy 渲染器兼容的 node_modules。Angular 兼容性編譯器將使用 ngc 編譯的 node_moduls 轉換爲相似於使用 ngtsc 編譯的 node_modules。經過這種轉換，Ivy 渲染引擎就可使用一些「遺留」包。

7. Angular Do-Bootstrap

它用於引導須要引導組件的模塊。Angular 7 增長了一個新的生命週期鉤子（ngDoBootstrap）和接口（DoBootstrap）。

例如：

更好的錯誤處理

Angular 7 爲 @Output 帶來了一個改進的錯誤處理，好比對於未初始化的屬性。

8. Angular 7 中的依賴項更新

TypeScript 3.1 支持

Angular 7 已將 TypeScript 版本從 2.7 升級到最新版本 3.1。在使用 Angular 7 時，必須使用 TypeScript 的最新版本。Angular 使用的 TypeScript 版本一般會滯後一些，因此這一次就匹配了最新的 TypeScript 版本。

RxJS 6.3

Angular 7 添加了最新版本的 RxJs（6.3.3），帶來了一些使人興奮的補充和變動。這些變動帶來了性能提高，而且讓開發人員更易於調試調用棧，並改進了模塊化，同時儘量向後兼容。

添加對 Node v10 的支持

Angular 7 團隊如今也支持 Node V10，具備向後兼容性。

帶有 Slot 的 Angular 元素

Angular 6.1 啓用了 ViewEncapsulation.ShadowDom 功能，這對 Angular 元素來講很是有用，如今支持在自定義元素中使用 Web 標準進行內容投射。Web 組件規範引入了一個新的標準 HTML 元素，即 Slot。這個功能現已可用，能夠經過模板來啓用組件。

而後能夠像下面這樣將其做爲 Angular 元素：

新的 ng-compiler

新的 ng-compiler 提供了加速的八階段編譯，並將大型應用程序的大小減小了大約一半。新編譯器可以進行八階段旋轉預先編譯。大多數應用程序的捆綁尺寸預期能夠大幅減小 95-99％。

拆分 @angular/core

Angular 的一個缺點是它的整體功能太多。它是一個大型的框架，自己會爲你自動提供可能用不到的模塊，所以，Angular 團隊已經將 @angular/core 拆分爲至少 418 個模塊。

Router

增長了新的警告類型，若是你嘗試在 Angular 區域以外觸發導航就會出現這個警告。若是你這樣作不起做用，Angular 會將警告寫入日誌（僅在開發模式下）。新版本還將導航執行上下文信息添加到 activation hooks 中。

9. 仍然沒有 Ivy

Angular 團隊並無承諾最終的時間表，但根據官方博文，Ivy 仍在積極開發中，但不屬於 Angular v7。咱們指望在版本 8 中會有完整的測試版。你能夠在 Angular 官方 GitHub 代碼庫中的 Ivy Renderer 問題中自行跟進。他們也但願 Ivy 能夠在次要版本中發佈，只要通過全面測試和驗證便可。也許咱們會在 Angular 7 的下一個版本中看到它。

10. 文檔更新

angular.io 上的文檔如今更新了與 Angular CLI 相關的參考資料。

棄用

最新的 Angular 7 版本棄用了一些東西，好比你以前使用在模板中聲明表單，這個選擇器如今已被棄用，如今應該使用<ng-form>。

如何更新到 Angular 7

若是你已經在 Angular 6 和 RXJS 6 上運行 Angular App，只須要更新你的 @angular cli/core 和 Angular Material。

或者訪問 update.angular.io 獲取有關更新應用程序的詳細信息和指南。開發人員報告說，Angular 7 更新速度比以往任什麼時候候都快，不少應用程序的更新時間不到 10 分鐘。

Angular 7 其餘的新功能：

• Angular Console——一個可下載的控制檯，用於在本地計算機上啓動和運行 Angular 項目；
• @angular/fire——AngularFire 在 npm 上有了新的主頁，併爲 Angular 提供了第一個穩定版本；
• NativeScript——如今可使用 NativeScript 爲 Web 和移動設備構建單個項目；
• StackBlitz——StackBlitz 2.0 已經發布，如今包含了 Angular 語言服務和更多功能，如選項卡編輯；
• 改進了 Selects 的可訪問性（mat-form-field 中的 selectelement）；
• bazel：protractor_web_test_suite 的初始提交；
• compiler-cli：將 tsickle 更新爲 0.29.x；
• core：將 defaultKeyValueDiffers 導出爲私有 API；
• 平臺瀏覽器：將 HammerJS 延遲加載器符號添加到公共 API 中；
• Service Worker：爲 SW 的通配配置提供支持。

結論

綜合上述的全部功能，Angular v7 看起來像是一個專一於迎合現代技術趨勢而增長功能的解決方案，如比特幣挖掘、虛擬滾動、拖放、Angular Material，等等，但仍然沒有在當前版本中包含 Ivy。

Angular 團隊在讓 Angular 變得更好方面作得很是出色。若是你計劃基於 Web 和移動技術實現本身的解決方案，請務必考慮 Angular 7 這個高效的新開發框架。

若是你依然在編程的世界裏迷茫，不知道本身的將來規劃，能夠加入前端學習進階內推交流羣685910553（前端資料分享）。裏面能夠與大神一塊兒交流並走出迷茫。

新手可免費領取學習資料，看看前輩們是如何在編程的世界裏傲然前行不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻），

有想學習web前端的，或是轉行，或是大學生，還有工做中想提高本身能力的，正在學習的小夥伴歡迎加入