【譯】Angular7 - CLI提示、虛擬滾動、拖放等
原文地址：ofollow,noindex" target="_blank">Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more
Angular 7.0.0 release版本正式釋出！這是跨整個平臺的主要版本，包括核心框架，Angular Material和具有同步主要版本的CLI工具。此版本包含了工具鏈的一些新功能，並已經促成了幾個主要合作伙伴的釋出。
虛擬滾動可以提高應用程式的效能
如何更新到v7
訪問update.angular.io 以獲取有關更新應用程式的詳細資訊和指導，但由於我們在v6中所做的工作，更新到v7只需要一個命令：
ng update @angular/cli @angular/core
v7版本早期使用者報告說，升級速度比以往任何時候都快，許多應用程式的升級時間不到10分鐘。
CLI提示
現在，CLI將在執行諸如ng new
或ng add @angular/material
之類的常用命令時提示使用者，以幫助你發現CLI內建的路由或支援SCSS等功能。
CLI提示已新增到Schematics
中，因此任何釋出Schematics的包都可以通過向Schematics集合新增x-prompt
來利用它們。
"routing": {
"type": "boolean",
"description": "Generates a routing module.",
"default": false,
"x-prompt": "Would you like to add Angular routing?"
},
應用效能
我們繼續關注效能，我們分析了整個Angular生態系統中的常見錯誤。我們發現許多開發人員在生產環境中包含了reflect-metadata
的polyfill，然而這只是在開發中需要的。
要解決此問題，v7版本的部分更新將自動從polyfills.ts
檔案中刪除它，然後在JIT模式下構建應用程式時將其作為構建步驟包含在內，預設情況下從生成版本中刪除此polyfill。
使用v7版本時，新專案會預設使用CLI中的Bundle Budgets。當初始 bundle 超過2MB，新應用程式將發出警告，超過5MB時將會報錯。這些引數可以在angular.json
中更改。
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]
這些budgets與利用ChromeData Saver 功能的使用者可以看到的警告一致。
Chrome Data Saver
Angular Material & the CDK
Material Design在2018年有了重大更新 。更新到V7版本的Angular Material使用者應該會看到反映Material Design規範更新的微小視覺差異。
Material Design更新了包括開發人員應該意識到的小變化
CDK的新使用者現在可以通過匯入DragDropModule
或ScrollingModule
來使用虛擬滾動和拖放。
虛擬滾動
虛擬滾動基於列表的可見部分從DOM中載入和解除安裝元素，使得有可能為擁有非常大的可滾動列表的使用者構建非常快速的體驗。
<cdk-virtual-scroll-viewportitemSize="50"class="example-viewport">
<div*cdkVirtualFor="let item of items"class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
拖放
在示例儀表板上的拖放功能
CDK現在支援拖放功能，並且包括當用戶移動元素時的自動渲染、用於列表重新排序(moveItemInArray
)和在列表之間移動元素(transferrarrayitem
)的輔助方法。
<divcdkDropListclass="list"(cdkDropListDropped)="drop($event)">
<divclass="box"*ngFor="let movie of movies"cdkDrag>{{movie}}</div>
</div>
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}
提高Selects的可訪問性
通過在mat-form-field
中使用原生select
元素來提高應用程式的可訪問性。原生select
具有一些效能、可訪問性和可用性優勢，但是我們保留mat-select
，它可以完全控制選項的呈現。
瞭解有關
mat-select
和
mat-form-field
欄位的更多資訊。
Angular Elements
Angular Elements現在支援對自定義元素使用web標準進行內容投影。
<my-custom-element>This content can be projected!</my-custom-element>
合作伙伴釋出
Angular的成功很大程度上歸功於社群，為此，我們一直在與最近啟動的幾個社群專案合作。
StackBlitz 2.0支援多視窗編輯和Angular Language Service
- Angular Console — 一個可下載的控制檯，用於在本地機器上啟動和執行Angular專案
- @angular/fire — AngularFire在NPM上有了一個新的家，並首次為Angular釋出了穩定的版本
- NativeScript — 現在可以使用NativeScript一套程式碼適配Web端和移動端
- StackBlitz — StackBlitz 2.0 已經發布，現在包括了Angular Language Service 和更多的功能，比如多個Tab頁同時編輯
文件更新
我們一直在努力改進我們的指南和參考資料。關於Angula.io的文件現在包括了Angular CLI的參考資料。
依賴更新
我們更新了對主要第三方專案的依賴。
- TypeScript 3.1
- ReactiveX/rxjs/blob/master/CHANGELOG.md#630-2018-08-30" rel="nofollow,noindex" target="_blank">RxJS 6.3
- Node 10 — 我們增加了對Node 10的支援，並且仍然支援Node 8
Ivy呢？
360" rel="nofollow,noindex" target="_blank">我們一直在繼續致力於一項名為Ivy的新計劃 ——我們的下一代渲染管道。Ivy目前正在積極開發中，並不是V7版本的一部分。我們已經開始用現有應用程式來驗證向後的相容性，並將在未來幾個月內，一旦Ivy準備就緒，就釋出可選擇Ivy的預覽版。