Angular 6：新特性与 Bug 修复一览
Angular 6 是一个令人期待的版本，它带来了一些令人兴奋的新特性和 Bug 修复。在这篇文章中，我们将介绍一些最值得关注的更新，包括 Angular Elements、类型检查器的改进、RxJS 6 和更好的性能。
Angular Elements
Angular Elements 是一个全新的库，它让你可以在非 Angular 应用中使用 Angular 组件。这个特性的好处在于，你可以使用 Angular 组件来减少代码量，增加重用性和可维护性。此外，你还可以在不同框架（如 React、Vue 或 jQuery）中使用 Angular 组件。
使用 Angular Elements 可以将 Angular 组件打包成一个自定义元素，然后在其他应用程序中使用。元素会自动化加载并且会当做 Web 组件来使用。
下面是一个简单的 Angular 元素示例：
-- -------------------- ---- ------- ------ - ---------- ----------------- - ---- ---------------- ------ - ------------------- - ---- -------------------- ------------ --------- -------------- --------- ---------- ------------- -------------- ------------------------- ------- ---- - ------ -------- -- ------ ----- ------------------- -- ------------------------------------ ------------------------------------------
在这个示例中，我们创建了一个名为 hello-world 的 Angular 元素，它简单地显示一则“Hello world!”消息。我们通过 DOM API 的 customElements 来定义了这个元素。在其他应用程序中，可以像这样使用：
<hello-world></hello-world>
类型检查器的改进
Angular 6 带来了一些感知更强的类型检查器，可以让你编写更安全、更规范的代码。这些改进包括了：
- 模板中的类型检查：模板语法可以接受 TypeScript 代码，这意味着模板语法中的变量会被正确地推断它们的类型。
<button (click)="onButtonClick()">Click me!</button>
<p>{{ message }}</p>-- -------------------- ---- -------
------ ----- ------------ -
------- ------- - --
------- - ---- ------ --- ------- - - ------------ - - --------
--------------- -
---------------
------------ - ---- ------ --- ------- - - ------------ - - --------
-
-- 类型检查器的变量声明：使用 let 或 const 声明的变量会被正确地推断出它们的类型，这意味着编译器将会在编译期发现一些常见的类型错误。
const message = 'Hello world!';
const numberArray = [1, 2, 3];
const someObject = {
property: 'value'
};RxJS 6
RxJS 6 是 Angular 6 默认使用的 RxJS 版本。它带来了一些非常重要的改进，包括：更简单、更可预测的 API，更好的性能，更好的错误处理和更深的 TypeScript 支持。RxJS 6 的一些核心概念包括：
- Observable：Observable 是一个可观察的流，它能够发出多个值。一些以前分别叫做 fromEvent、interval 或 timer 的操作符现在都被处理为 Observable。Observable 中的数据具有类型安全性，因此 RxJS 在编译期间就可以找到一些常见的错误。
import { from, interval } from 'rxjs';
from(['foo', 'bar', 'baz']).subscribe(val => console.log(val));
interval(1000).subscribe(val => console.log(val));- Operator：Operator 是从一个 Observable 转换到另一个 Observable。RxJS 6 引入了管道运算符（pipe）和 lettable 操作符，这使得组合和重用操作变得更加简单和清晰。此外，RxJS 还提供了大量的内置操作符，如 map、filter、buffer 等等。
-- -------------------- ---- -------
------ - ---- - ---- -------
------ - ------- --- - ---- -----------------
-------- -- -- -- -- -- -- -- -- ----
------
---------- -- --- - - --- ---
------- -- --- - --
-
-------------- -- ------------------性能改进
Angular 6 带来了一些重要的性能改进，让应用程序更快、更可靠。其中一些最主要的变化包括：
Ivy Renderer：Ivy Renderer 是用于渲染 Angular 组件的新引擎。它利用新的编译时和运行时技术，增加可缓存性和可优化性。这意味着应用程序加载和响应时间可能更短。
NgRx 6 中的 State Management：NgRx 是一个以 Redux 为基础开发的 Angular 库，它允许你管理应用程序的状态。NgRx 6 带来了一些性能提升，最显著的是改进了 delay operator 的性能。
包大小：Angular 6 的的包大小经过了优化，现在比以前更小、更容易下载。
总结
Angular 6 为我们带来了一些非常具有实际价值的新特性和 Bug 修复，包括 Angular Elements、类型检查器的改进、RxJS 6 和性能改进。这些变化使得 Angular 更容易使用，并提高了性能。如果你已经在使用 Angular，这些内容应该可以帮助你更好地理解和实践 Angular 6。如果你还没有使用 Angular，那么现在可能是开始的好时机。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480a2c548841e989401c42a