Angular v4中需要注意的5个功能

By now, most probably, we have come in peace with the fact that Angular will be rolling out features using semantic versioning. This means we've got to worry less about nor entirely new concept (at least for now).

到目前为止，很可能我们已经与Angular将使用语义版本控制推出功能这一事实放在一起。 这意味着我们不必担心也不是全新的概念（至少目前如此）。

Angular skipped version 3 to v4 so as to sync all the different modules. The sync was broken when the Router module was already at v3, and the other modules with no API breaking changes were still at v2. Jacky Kimani announced v4 here at Scotch and highlighted some important points worth noting about this version.

Angular将版本3跳到了v4，以便同步所有不同的模块。 当路由器模块已经在v3上时，同步中断了，而其他没有API中断更改的模块仍在v2上。 Jacky Kimani 在Scotch上宣布了v4，并强调了一些有关此版本的重要注意事项。

Angular v4 is now released!

Angular v4现在发布了！

With v4 in RC, there are awesome features that are worth your time. They include but not all:

在RC中使用v4，有些很棒的功能值得您花时间。 它们包括但不是全部：

1. if...else syntax in component HTML templates
   if ... else组件HTML模板中的语法
2. Stand alone animation module
   独立动画模块
3. TypeScript's StrictNullChecks compliancy
   TypeScript的StrictNullChecks合规性
4. Angular Universal adoption by team to live in core
   团队采用Angular Universal融入核心
5. Performance boost with FESM
   FESM提升性能

安装 ( Installation )

Angular v4 is in RC; this means you can start using it in your project hoping that no breaking changes will be released at final. To install, run the following command:

Angular v4在RC中； 这意味着您可以开始在项目中使用它，希望最终不会发布任何重大更改。 要安装，请运行以下命令：

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@next --save

The installation requires an update to TypeScript.

安装需要更新TypeScript。

1.如果...其他模板条件 ( 1. If...Else Template Conditions )

Angular 2.x has a *ngIf template literal used for making decision based on some JavaScript-like expression:

Angular 2.x具有*ngIf模板文字，用于基于类似于JavaScript的表达式进行决策：

<p *ngIf="isAuth">You are logged in as auth.usernamep>

What if the user is not logged in or we are waiting for the user login request to complete before displaying a message? With Angular v4 (RC), you can use the else syntax to handle such case:

如果用户尚未登录或者我们在显示消息之前正在等待用户登录请求完成，该怎么办？ 对于Angular v4（RC），您可以使用else语法来处理这种情况：

Syntax:

语法 ：

<element *ngIf="[condition expression]; else [else template]">

element>

Example:

例：

<ng-template #hidden>
  <p>You are not allowed to see our secretp>
ng-template>
<p *ngIf="shown; else hidden">
  Our secret is being happy
p>

export class AppComponent implements OnInit {
  shown: Boolean;
  auth: Observable<{}>;

  ngOnInit() {
    this.shown = false;
  }
}

DOM Output:

DOM输出 ：

<p>
You are not allowed to see our secret
p>

显示加载信息 (Showing Loading Info)

Let's have a look at a possibly realistic example:

让我们看一个可能现实的例子：

export class AppComponent implements OnInit{
  auth: Observable<{}>;

  ngOnInit() {
    this.shown = true;
    this.auth = Observable
      .of({username: 'chris', password: '[email protected]'})
      .delay(new Date(Date.now() + 4000));
  }
}

We are simulating an HTTP async request with Observable that returns a user payload if successful. The request simulation will take 4 seconds so we can use the else syntax to display a loading message while it waits:

我们正在使用Observable模拟HTTP异步请求，如果成功，该请求将返回用户有效负载。 请求模拟将花费4秒，因此我们可以在等待时使用else语法显示加载消息：

<ng-template #fetching>
  <p>Fetching...p>
ng-template>
<p *ngIf="auth | async; else fetching; let user">
  {{user.username }}
p>

2.动画模块 ( 2. Animation Module )

Animation has been around since Angular 2 but was maintained under @angular/core. So if you wanted to use the animation features, your import would look like this:

动画自Angular 2起就出现了，但一直保留在@angular/core 。 因此，如果要使用动画功能，则导入将如下所示：

import { 
  Component, 
  OnInit
  // Animation members
  animate, 
  state, 
  style, 
  transition, 
  trigger } from '@angular/core'

Angular will no longer allow you to do that, rather, you should import those animation members from @angular/animations:

Angular将不再允许您这样做，而是应该从@angular/animations导入那些动画成员：

import {Component, OnInit} from '@angular/core';

import {
  animate, 
  state, 
  style, 
  transition, 
  trigger } from '@angular/animations'

3. TypeScript的StrictNullChecks ( 3. TypeScript's StrictNullChecks )

Originally, null and undefined are JavaScript valid first class type citizens. TypeScript before now didn't adhere to that, which means you can't define a variable and tell TypeScript that this variable's value can be null or undefined.

最初， null和undefined是JavaScript有效的第一类公民。 TypeScript之前还没有遵守该规定，这意味着您无法定义变量，并告诉TypeScript该变量的值可以为null或undefined 。

Now, TypeScript allows you to explicitly say a variable can have any of those types:

现在，TypeScript允许您明确地说变量可以具有以下任何类型：

let x = String | null
let y = Number | undefined
let z = Array<String> | null | undefined

The above example simple says:

上面的示例简单地说：

• x can have a value of type String or a null value
  x可以具有String类型的值或空值
• y can have a value of type Number or can be undefined
  y可以具有Number类型的值，或者可以是未定义的
• z can have a value of type Arrays with String members, can be a null or can be undefined
  z可以具有带有String成员的Arrays类型的值，可以为null或不确定

This feature is now compliant in Angular (v4), so you could do stuff like this:

现在，此功能已在Angular（v4）中兼容，因此您可以执行以下操作：

export class AppComponent implements OnInit{

  canBeNull: String | null;
  canBeUndefined: Number | undefined;
  canBeNullOrUndefined: String | null | undefined;

  ngOnInit() {
    this.canBeNull = null;
    console.log(this.canBeNull); // null

    this.canBeUndefined = undefined;
    console.log(this.canBeUndefined); // undefined

    this.canBeNullOrUndefined = null;
    console.log(this.canBeNullOrUndefined); //null
    this.canBeNullOrUndefined = undefined;
    console.log(this.canBeNullOrUndefined); // undefined
  }
}

4.角度通用 ( 4. Angular Universal )

Server-side rendering is the act of spitting the same HTML content in virtual DOM to the server so that they are rendered appropriately by the browser on request. This allows spiders and web robots to dig your websites and index contents when necessary.

服务器端渲染是将虚拟DOM中的相同HTML内容分散到服务器的行为，以便浏览器根据请求适当地渲染它们。 这使蜘蛛和网络机器人可以在必要时挖掘您的网站并索引内容。

Server-side rendering was not a thing in canonical web development until single page apps came about. Such apps use a virtual DOM concept which abstracts DOM rendering. A technique is needed to render to DOM via server requests, and Angular has a solution called Angular Universal which we have previously talked about.

直到出现单页应用程序后，服务器端渲染才成为规范Web开发中的一环。 此类应用程序使用抽象DOM呈现的虚拟DOM概念。 需要一种通过服务器请求呈现为DOM的技术，并且Angular有一个名为Angular Universal的解决方案，我们之前已经谈到过 。

The project was maintained entirely outside Angular, but from Angular v4 forward, Universal will become a core Angular module. Henceforth, you can easily do this:

该项目完全在Angular外部维护，但是从Angular v4向前，Universal将成为Angular的核心模块。 此后，您可以轻松地执行以下操作：

import { platformServer, renderModuleFactory } from '@angular/platform-server'

Rob's example is a perfect and easy place to see how the integration works out.

Rob的示例是了解集成工作原理的理想场所。

5. FESM ( 5. FESM )

Meaning: Flattened ECMAScript Module

含义：扁平化的ECMAScript模块

This is a very important update that you will likely never notice. Angular v4 ships flattened versions of modules in the ECMAScript Module format. Quoting the changelog:

这是非常重要的更新，您可能永远不会注意到。 Angular v4随附ECMAScript模块格式的模块扁平版本。 引用变更日志：

This format should help tree-shaking, help reduce the size of your generated bundles, and speed up build, transpilation, and loading in the browser in certain scenarios.

在某些情况下，这种格式应有助于摇树，减少生成的包的大小，并加快在浏览器中的构建，编译和加载。

This implies that there will be a noticeable impact on performance. Judging from my test, the build speed when running ng server has increased drastically.

这意味着将对性能产生显着影响。 从我的测试来看，运行ng server时的构建速度已大大提高。

结论 ( Conclusion )

A few things to watch out for:

需要注意的几件事：

• Updating to Angular v4 could mean that some of the dependent modules will be out of sync, so you have to update them as well. Personally, the only issue I had was TypeScript which I updated to 2.2.1.
  更新到Angular v4可能意味着某些相关模块将不同步，因此您也必须对其进行更新。 就个人而言，我遇到的唯一问题是TypeScript，我将其更新为2.2.1 。
• Code editors and plugins that understand the Angular template syntax will still complain about improper syntax when you use the else keyword. This is fine because your code will still work. The plugin/editor managers will make updates as soon as they can.
  当您使用else关键字时，了解Angular模板语法的代码编辑器和插件仍会抱怨语法不正确。 很好，因为您的代码仍然可以使用。 插件/编辑管理器将尽快进行更新。

With all these information, feel free to start experimenting this shiny version. It would also be nice to help the team and community by filing issues if you come across a weird behavior from setting up to usage. You can also read about other features and bug fixes if you think it's necessary.

掌握了所有这些信息后，就可以开始尝试使用该闪亮版本了。 如果您遇到从设置到使用的奇怪行为，也可以通过提交问题来帮助团队和社区，这将是很好的。 如果您认为有必要，还可以阅读其他功能和错误修复 。

翻译自: https://scotch.io/tutorials/5-features-to-watch-out-for-in-angular-4