0%

【译】Angular7 - CLI提示、虚拟滚动、拖放等

原文地址:Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more

Angular 7.0.0 release版本正式发布!这是跨整个平台的主要版本,包括核心框架,Angular Material和具有同步主要版本的CLI工具。此版本包含了工具链的一些新功能,并已经促成了几个主要合作伙伴的发布。

虚拟滚动可以提高应用程序的性能

11

如何更新到v7

访问update.angular.io以获取有关更新应用程序的详细信息和指导,但由于我们在v6中所做的工作,更新到v7只需要一个命令:

1
ng update @angular/cli @angular/core

v7版本早期使用者报告说,升级速度比以往任何时候都快,许多应用程序的升级时间不到10分钟。

CLI提示

现在,CLI将在运行诸如ng newng add @angular/material之类的常用命令时提示用户,以帮助你发现CLI内置的路由或支持SCSS等功能。

CLI提示已添加到Schematics中,因此任何发布Schematics的包都可以通过向Schematics集合添加x-prompt来利用它们。

1
2
3
4
5
6
"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中更改。

1
2
3
4
5
"budgets": [{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}]

这些budgets与利用Chrome Data Saver功能的用户可以看到的警告一致。

Chrome Data Saver

Angular Material & the CDK

Material Design在2018年有了重大更新。更新到V7版本的Angular Material用户应该会看到反映Material Design规范更新的微小视觉差异。

Material Design更新了包括开发人员应该意识到的小变化

CDK的新用户现在可以通过导入DragDropModuleScrollingModule来使用虚拟滚动和拖放。

虚拟滚动

虚拟滚动基于列表的可见部分从DOM中加载和卸载元素,使得有可能为拥有非常大的可滚动列表的用户构建非常快速的体验。

1
2
3
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

阅读更多关于虚拟滚动的信息

拖放

在示例仪表板上的拖放功能

CDK现在支持拖放功能,并且包括当用户移动元素时的自动渲染、用于列表重新排序( moveItemInArray )和在列表之间移动元素( transferrarrayitem)的辅助方法。

1
2
3
<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
<div class="box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
</div>
1
2
3
drop(event: CdkDragDrop<string[]>) {
moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
}

阅读更多关于拖放的信息

提高Selects的可访问性

通过在mat-form-field中使用原生select元素来提高应用程序的可访问性。原生select具有一些性能、可访问性和可用性优势,但是我们保留mat-select,它可以完全控制选项的呈现。

了解有关mat-selectmat-form-field字段的更多信息。

Angular Elements

Angular Elements现在支持对自定义元素使用web标准进行内容投影。

1
<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的参考资料。

依赖更新

我们更新了对主要第三方项目的依赖。

Ivy呢?

我们一直在继续致力于一项名为Ivy的新计划——我们的下一代渲染管道。Ivy目前正在积极开发中,并不是V7版本的一部分。我们已经开始用现有应用程序来验证向后的兼容性,并将在未来几个月内,一旦Ivy准备就绪,就发布可选择Ivy的预览版。

欢迎关注我的其它发布渠道