预先（AOT）编译器link

Ahead-of-time (AOT) compilationlink

Angular 应用主要由组件及其 HTML 模板组成。由于浏览器无法直接理解 Angular 所提供的组件和模板，因此 Angular 应用程序需要先进行编译才能在浏览器中运行。

An Angular application consists mainly of components and their HTML templates. Because the components and templates provided by Angular cannot be understood by the browser directly, Angular applications require a compilation process before they can run in a browser.

在浏览器下载和运行代码之前的编译阶段，Angular 预先（AOT）编译器会先把你的 Angular HTML 和 TypeScript 代码转换成高效的 JavaScript 代码。 在构建期间编译应用可以让浏览器中的渲染更快速。

The Angular ahead-of-time (AOT) compiler converts your Angular HTML and TypeScript code into efficient JavaScript code during the build phase before the browser downloads and runs that code. Compiling your application during the build process provides a faster rendering in the browser.

本指南中解释了如何指定元数据，并使用一些编译器选项以借助 AOT 编译器来更有效的编译应用。

This guide explains how to specify metadata and apply available compiler options to compile your applications efficiently using the AOT compiler.

下面是你可能要使用 AOT 的部分原因。

Here are some reasons you might want to use AOT.

• 更快的渲染。 借助 AOT，浏览器可以下载应用的预编译版本。浏览器加载的是可执行代码，因此它可以立即渲染应用，而无需等待先编译好应用。

  Faster rendering With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

• 更少的异步请求。 编译器会在应用 JavaScript 中内联外部 HTML 模板和 CSS 样式表，从而消除了对那些源文件的单独 ajax 请求。

  Fewer asynchronous requests The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

• 较小的 Angular 框架下载大小。 如果已编译应用程序，则无需下载 Angular 编译器。编译器大约是 Angular 本身的一半，因此省略编译器会大大减少应用程序的有效载荷。

  Smaller Angular framework download size There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

• 尽早检测模板错误。 AOT 编译器会在构建步骤中检测并报告模板绑定错误，然后用户才能看到它们。

  Detect template errors earlier The AOT compiler detects and reports template binding errors during the build step before users can see them.

• 更高的安全性。 AOT 在将 HTML 模板和组件提供给客户端之前就将其编译为 JavaScript 文件。没有要读取的模板，没有潜藏风险的客户端 HTML 或 JavaScript eval，受到注入攻击的机会就更少了。

  Better security AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

选择编译器link

Choosing a compilerlink

Angular 提供了两种方式来编译你的应用：

Angular offers two ways to compile your application:

• 即时编译 (JIT)，它会在运行期间在浏览器中编译你的应用。这是 Angular 8 及更早版本的默认值。

  Just-in-Time (JIT), which compiles your app in the browser at runtime. This was the default until Angular 8.

• 预先（AOT）编译，它会在构建时编译你的应用和库。这是 Angular 9 及后续版本的默认值。

  Ahead-of-Time (AOT), which compiles your app and libraries at build time. This is the default since Angular 9.

当运行 CLI 命令 ng build(只构建) 或 ng serve(构建并启动本地服务器) 时，编译类型（JIT 或 AOT）取决于你在 angular.json 中的构建配置所指定的 aot 属性。默认情况下，对于新的 CLI 应用，其 aot 为 true。

When you run the ng build(build only) or ng serve(build and serve locally) CLI commands, the type of compilation (JIT or AOT) depends on the value of the aot property in your build configuration specified in angular.json. By default, aot is set to true for new CLI apps.

要了解更多，请参见CLI 文档，和 构建与运行 Angular 应用。

See the CLI command reference and Building and serving Angular apps for more information.

AOT 工作原理link

How AOT workslink

Angular AOT 编译器会提取元数据来解释应由 Angular 管理的应用程序部分。你可以在装饰器（例如 @Component() 和 @Input()）中显式指定元数据，也可以在被装饰的类的构造函数声明中隐式指定元数据。元数据告诉 Angular 要如何构造应用程序类的实例并在运行时与它们进行交互。

The Angular AOT compiler extracts metadata to interpret the parts of the application that Angular is supposed to manage. You can specify the metadata explicitly in decorators such as @Component() and @Input(), or implicitly in the constructor declarations of the decorated classes. The metadata tells Angular how to construct instances of your application classes and interact with them at runtime.

在下列范例中，@Component() 元数据对象和类的构造函数会告诉 Angular 如何创建和显示 TypicalComponent 的实例。

In the following example, the @Component() metadata object and the class constructor tell Angular how to create and display an instance of TypicalComponent.

      
        content_copy
      
      @Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
)}
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { ... }
}
    

Angular 编译器只提取一次元数据，并且为 TypicalComponent 生成一个工厂。 当它需要创建 TypicalComponent 的实例时，Angular 调用这个工厂，工厂会生成一个新的可视元素，并且把它（及其依赖）绑定到组件类的一个新实例上。

The Angular compiler extracts the metadata once and generates a factory for TypicalComponent. When it needs to create a TypicalComponent instance, Angular calls the factory, which produces a new visual element, bound to a new instance of the component class with its injected dependency.

编译的各个阶段link

Compilation phaseslink

AOT 编译分为三个阶段。

There are three phases of AOT compilation.

• 阶段 1 是代码分析。 在此阶段，TypeScript 编译器和 AOT 收集器会创建源码的表现层。收集器不会尝试解释其收集到的元数据。它只是尽可能地表达元数据，并在检测到元数据语法冲突时记录错误。

  Phase 1 is code analysis. In this phase, the TypeScript compiler and AOT collector create a representation of the source. The collector does not attempt to interpret the metadata it collects. It represents the metadata as best it can and records errors when it detects a metadata syntax violation.

• 第二阶段是代码生成。 在此阶段，编译器的 StaticReflector 会解释在阶段 1 中收集的元数据，对元数据执行附加验证，如果检测到元数据违反了限制，则抛出错误。

  Phase 2 is code generation. In this phase, the compiler's StaticReflector interprets the metadata collected in phase 1, performs additional validation of the metadata, and throws an error if it detects a metadata restriction violation.

• 阶段 3 是模板类型检查。在此可选阶段，Angular 模板编译器使用 TypeScript 编译器来验证模板中的绑定表达式。你可以通过设置 fullTemplateTypeCheck 配置选项来明确启用此阶段。请参阅 Angular 编译器选项。

  Phase 3 is template type checking. In this optional phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates. You can enable this phase explicitly by setting the fullTemplateTypeCheck configuration option; see Angular compiler options.

元数据的限制link

Metadata restrictionslink

你只能使用 TypeScript 的一个子集书写元数据，它必须满足下列限制：

You write metadata in a subset of TypeScript that must conform to the following general constraints:

• 表达式语法只支持 JavaScript 的一个有限的子集。

  Limit expression syntax to the supported subset of JavaScript.

• 只能引用代码收缩后导出的符号。

  Only reference exported symbols after code folding.

• 只能调用编译器支持的那些函数。

  Only call functions supported by the compiler.

• 被装饰和用于数据绑定的类成员必须是公共（public）的。

  Decorated and data-bound class members must be public.

有关准备 AOT 编译应用程序的其它准则和说明，请参阅 Angular：编写 AOT 友好的应用程序。

For additional guidelines and instructions on preparing an application for AOT compilation, see Angular: Writing AOT-friendly applications.

配置 AOT 编译link

Configuring AOT compilationlink

你可以在 tsconfig.json TypeScript 配置文件中提供控制编译过程的选项。有关可用选项的完整列表，请参见 Angular 编译器选项。

You can provide options in the TypeScript configuration file that controls the compilation process. See Angular compiler options for a complete list of available options.

阶段 1：分析link

Phase 1: Code analysislink

TypeScript 编译器会做一些初步的分析工作，它会生成类型定义文件.d.ts，其中带有类型信息，Angular 编译器需要借助它们来生成代码。

The TypeScript compiler does some of the analytic work of the first phase. It emits the .d.ts type definition files with type information that the AOT compiler needs to generate application code.

同时，AOT 收集器（collector） 会记录 Angular 装饰器中的元数据，并把它们输出到.metadata.json文件中，和每个 .d.ts 文件相对应。

At the same time, the AOT collector analyzes the metadata recorded in the Angular decorators and outputs metadata information in .metadata.jsonfiles, one per .d.ts file.

你可以把 .metadata.json 文件看做一个包括全部装饰器的元数据的全景图，就像抽象语法树 (AST) 一样。

You can think of .metadata.json as a diagram of the overall structure of a decorator's metadata, represented as an abstract syntax tree (AST).

表达式语法限制link

Expression syntax limitationslink

AOT 收集器只能理解 JavaScript 的一个子集。 定义元数据对象时要遵循下列语法限制：

The AOT collector only understands a subset of JavaScript. Define metadata objects with the following limited syntax:

如果表达式使用了不支持的语法，收集器就会往 .metadata.json 文件中写入一个错误节点。稍后，如果编译器用到元数据中的这部分内容来生成应用代码，它就会报告这个错误。

If an expression uses unsupported syntax, the collector writes an error node to the .metadata.json file. The compiler later reports the error if it needs that piece of metadata to generate the application code.

      
        content_copy
      
      "angularCompilerOptions": {
  ...
  "strictMetadataEmit" : true
}
    

不要有箭头函数link

No arrow functionslink

AOT 编译器不支持 函数表达式 和 箭头函数（也叫 Lambda 函数）。

The AOT compiler does not support function expressions and arrow functions, also called lambda functions.

考虑如下组件装饰器：

Consider the following component decorator:

      
        content_copy
      
      @Component({
  ...
  providers: [{provide: server, useFactory: () => new Server()}]
})
    

AOT 的收集器不支持在元数据表达式中出现箭头函数 () => new Server()。 它会在该函数中就地生成一个错误节点。 稍后，当编译器解释该节点时，它就会报告一个错误，让你把这个箭头函数转换成一个导出的函数。

The AOT collector does not support the arrow function, () => new Server(), in a metadata expression. It generates an error node in place of the function. When the compiler later interprets this node, it reports an error that invites you to turn the arrow function into an exported function.

你可以把它改写成这样来修复这个错误：

You can fix the error by converting to this:

      
        content_copy
      
      export function serverFactory() {
  return new Server();
}

@Component({
  ...
  providers: [{provide: server, useFactory: serverFactory}]
})
    

在版本 5 和更高版本中，编译器会在发出 .js 文件时自动执行此重写。

In version 5 and later, the compiler automatically performs this rewriting while emitting the .js file.

代码折叠link

Code foldinglink

编译器只会解析到 已导出 符号的引用。 收集器可以在收集期间执行表达式，并用其结果记录到 .metadata.json 中（而不是原始表达式中）。 这样可以让你把非导出符号的使用限制在表达式中。

The compiler can only resolve references to exported symbols. The collector, however, can evaluate an expression during collection and record the result in the .metadata.json, rather than the original expression. This allows you to make limited use of non-exported symbols within expressions.

比如，收集器可以执行表达式 1 + 2 + 3 + 4，并使用它的结果 10 替换它。

For example, the collector can evaluate the expression 1 + 2 + 3 + 4 and replace it with the result, 10.

这个过程被称为折叠。能用这种方式进行简化的表达式就是可折叠的。

This process is called folding. An expression that can be reduced in this manner is foldable.

收集器可以计算对模块局部变量的 const 声明和初始化过的 var 和 let 声明，并从 .metadata.json 文件中移除它们。

The collector can evaluate references to module-local const declarations and initialized var and let declarations, effectively removing them from the .metadata.json file.

考虑下列组件定义：

Consider the following component definition:

      
        content_copy
      
      const template = '<div>{{hero.name}}</div>';

@Component({
  selector: 'app-hero',
  template: template
})
export class HeroComponent {
  @Input() hero: Hero;
}
    

编译器不能引用 template 常量，因为它是未导出的。 但是收集器可以通过内联 template 常量的方式把它折叠进元数据定义中。 最终的结果和你以前的写法是一样的：

The compiler could not refer to the template constant because it isn't exported. The collector, however, can fold the template constant into the metadata definition by in-lining its contents. The effect is the same as if you had written:

      
        content_copy
      
      @Component({
  selector: 'app-hero',
  template: '<div>{{hero.name}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}
    

这里没有对 template 的引用，因此，当编译器稍后对位于 .metadata.json 中的收集器输出进行解释时，不会再出问题。

There is no longer a reference to template and, therefore, nothing to trouble the compiler when it later interprets the collector's output in .metadata.json.

你还可以通过把 template 常量包含在其它表达式中来让这个例子深入一点：

You can take this example a step further by including the template constant in another expression:

      
        content_copy
      
      const template = '<div>{{hero.name}}</div>';

@Component({
  selector: 'app-hero',
  template: template + '<div>{{hero.title}}</div>'
})
export class HeroComponent {
  @Input() hero: Hero;
}
    

收集器把该表达式缩减成其等价的已折叠字符串：

The collector reduces this expression to its equivalent folded string:

      
        content_copy
      
      '<div>{{hero.name}}</div><div>{{hero.title}}</div>'
    

可折叠的语法link

Foldable syntaxlink

下表中描述了收集器可以折叠以及不能折叠哪些表达式：

The following table describes which expressions the collector can and cannot fold:

如果表达式是不可折叠的，那么收集器就会把它作为一个 AST（抽象语法树） 写入 .metadata.json 中，留给编译器去解析。

If an expression is not foldable, the collector writes it to .metadata.json as an AST for the compiler to resolve.

阶段 2：代码生成link

Phase 2: code generationlink

收集器不会试图理解它收集并输出到 .metadata.json 中的元数据，它所能做的只是尽可能准确的表述这些元数据，并在检测到元数据中的语法违规时记录这些错误。 解释这些 .metadata.json 是编译器在代码生成阶段要承担的工作。

The collector makes no attempt to understand the metadata that it collects and outputs to .metadata.json. It represents the metadata as best it can and records errors when it detects a metadata syntax violation. It's the compiler's job to interpret the .metadata.json in the code generation phase.

编译器理解收集器支持的所有语法形式，但是它也可能拒绝那些虽然语法正确但语义违反了编译器规则的元数据。

The compiler understands all syntax forms that the collector supports, but it may reject syntactically correct metadata if the semantics violate compiler rules.

公共符号link

Public symbolslink

编译器只能引用已导出的符号。

The compiler can only reference exported symbols.

• 带有装饰器的类成员必须是公开的。你不可能把一个私有或内部使用的属性做成 @Input()。

  Decorated component class members must be public. You cannot make an @Input() property private or protected.

• 数据绑定的属性同样必须是公开的。

  Data bound properties must also be public.

      
        content_copy
      
      // BAD CODE - title is private
@Component({
  selector: 'app-root',
  template: '<h1>{{title}}</h1>'
})
export class AppComponent {
  private title = 'My App'; // Bad
}
    

支持的类和函数link

Supported classes and functionslink

只要语法有效，收集器就可以用 new 来表示函数调用或对象创建。但是，编译器在后面可以拒绝生成对特定函数的调用或对特定对象的创建。

The collector can represent a function call or object creation with new as long as the syntax is valid. The compiler, however, can later refuse to generate a call to a particular function or creation of a particular object.

编译器只能创建某些类的实例，仅支持核心装饰器，并且仅支持对返回表达式的宏（函数或静态方法）的调用。

The compiler can only create instances of certain classes, supports only core decorators, and only supports calls to macros (functions or static methods) that return expressions.

• 新建实例

  New instances

  编译器只允许创建来自 @angular/core 的 InjectionToken 类创建实例。

  The compiler only allows metadata that create instances of the class InjectionToken from @angular/core.

• 支持的装饰器

  Supported decorators

  编译器只支持来自 @angular/core 模块的 Angular 装饰器的元数据。

  The compiler only supports metadata for the Angular decorators in the @angular/core module.

• 函数调用

  Function calls

  工厂函数必须导出为命名函数。 AOT 编译器不支持用 Lambda 表达式（箭头函数）充当工厂函数。

  Factory functions must be exported, named functions. The AOT compiler does not support lambda expressions ("arrow functions") for factory functions.

函数和静态方法调用link

Functions and static method callslink

收集器接受任何只包含一个 return 语句的函数或静态方法。 编译器也支持在返回表达式的函数或静态函数中使用宏。

The collector accepts any function or static method that contains a single return statement. The compiler, however, only supports macros in the form of functions or static methods that return an expression.

考虑下面的函数：

For example, consider the following function:

      
        content_copy
      
      export function wrapInArray<T>(value: T): T[] {
  return [value];
}
    

你可以在元数据定义中调用 wrapInArray，因为它所返回的表达式的值满足编译器支持的 JavaScript 受限子集。

You can call the wrapInArray in a metadata definition because it returns the value of an expression that conforms to the compiler's restrictive JavaScript subset.

你还可以这样使用 wrapInArray()：

You might use wrapInArray() like this:

      
        content_copy
      
      @NgModule({
  declarations: wrapInArray(TypicalComponent)
})
export class TypicalModule {}
    

编译器会把这种用法处理成你以前的写法：

The compiler treats this usage as if you had written:

      
        content_copy
      
      @NgModule({
  declarations: [TypicalComponent]
})
export class TypicalModule {}
    

Angular 的 RouterModule导出了两个静态宏函数 forRoot 和 forChild，以帮助声明根路由和子路由。 查看这些方法的源码，以了解宏函数是如何简化复杂的 NgModule 配置的。

The Angular RouterModuleexports two macro static methods, forRoot and forChild, to help declare root and child routes. Review the source code for these methods to see how macros can simplify configuration of complex NgModules.

元数据重写link

Metadata rewritinglink

编译器会对含有 useClass、useValue、useFactory 和 data 的对象字面量进行特殊处理，把用这些字段之一初始化的表达式转换成一个导出的变量，并用它替换该表达式。 这个重写表达式的过程，会消除它们受到的所有限制，因为编译器并不需要知道该表达式的值，它只要能生成对该值的引用就行了。

The compiler treats object literals containing the fields useClass, useValue, useFactory, and data specially, converting the expression initializing one of these fields into an exported variable that replaces the expression. This process of rewriting these expressions removes all the restrictions on what can be in them because the compiler doesn't need to know the expression's value—it just needs to be able to generate a reference to the value.

你可以这样写：

You might write something like:

      
        content_copy
      
      class TypicalServer {

}

@NgModule({
  providers: [{provide: SERVER, useFactory: () => TypicalServer}]
})
export class TypicalModule {}
    

如果不重写，这就是无效的，因为这里不支持 Lambda 表达式，而且 TypicalServer 也没有被导出。 为了支持这种写法，编译器自动把它重写成了这样：

Without rewriting, this would be invalid because lambdas are not supported and TypicalServer is not exported. To allow this, the compiler automatically rewrites this to something like:

      
        content_copy
      
      class TypicalServer {

}

export const ɵ0 = () => new TypicalServer();

@NgModule({
  providers: [{provide: SERVER, useFactory: ɵ0}]
})
export class TypicalModule {}
    

这就让编译器能在工厂中生成一个对 ɵ0 的引用，而不用知道 ɵ0 中包含的值到底是什么。

This allows the compiler to generate a reference to ɵ0 in the factory without having to know what the value of ɵ0 contains.

编译器会在生成 .js 文件期间进行这种重写。它不会重写 .d.ts 文件，所以 TypeScript 也不会把这个变量当做一项导出，因此也就不会污染 ES 模块中导出的 API。

The compiler does the rewriting during the emit of the .js file. It does not, however, rewrite the .d.ts file, so TypeScript doesn't recognize it as being an export. and it does not interfere with the ES module's exported API.

阶段 3：模板类型检查link

Phase 3: Template type checkinglink

Angular 编译器最有用的功能之一就是能够对模板中的表达式进行类型检查，在由于出错而导致运行时崩溃之前就捕获任何错误。在模板类型检查阶段，Angular 模板编译器会使用 TypeScript 编译器来验证模板中的绑定表达式。

One of the Angular compiler's most helpful features is the ability to type-check expressions within templates, and catch any errors before they cause crashes at runtime. In the template type-checking phase, the Angular template compiler uses the TypeScript compiler to validate the binding expressions in templates.

通过在该项目的 TypeScript 配置文件中的 "angularCompilerOptions" 中添加编译器选项 "fullTemplateTypeCheck"，可以显式启用本阶段（见 Angular 编译器选项 ）。

Enable this phase explicitly by adding the compiler option "fullTemplateTypeCheck" in the "angularCompilerOptions" of the project's TypeScript configuration file (see Angular Compiler Options).

当模板绑定表达式中检测到类型错误时，进行模板验证时就会生成错误。这和 TypeScript 编译器在处理 .ts 文件中的代码时报告错误很相似。

Template validation produces error messages when a type error is detected in a template binding expression, similar to how type errors are reported by the TypeScript compiler against code in a .ts file.

比如，考虑下列组件：

For example, consider the following component:

      
        content_copy
      
      @Component({
  selector: 'my-component',
  template: '{{person.addresss.street}}'
})
class MyComponent {
  person?: Person;
}
    

这会生成如下错误：

This produces the following error:

      
        content_copy
      
      my.component.ts.MyComponent.html(1,1): : Property 'addresss' does not exist on type 'Person'. Did you mean 'address'?
    

错误信息中汇报的文件名 my.component.ts.MyComponent.html 是一个由模板编译器生成出的合成文件， 用于保存 MyComponent 类的模板内容。 编译器永远不会把这个文件写入磁盘。这个例子中，这里的行号和列号都是相对于 MyComponent 的 @Component 注解中的模板字符串的。 如果组件使用 templateUrl 来代替 template，这些错误就会在 templateUrl 引用的 HTML 文件中汇报，而不是这个合成文件中。

The file name reported in the error message, my.component.ts.MyComponent.html, is a synthetic file generated by the template compiler that holds contents of the MyComponent class template. The compiler never writes this file to disk. The line and column numbers are relative to the template string in the @Component annotation of the class, MyComponent in this case. If a component uses templateUrl instead of template, the errors are reported in the HTML file referenced by the templateUrl instead of a synthetic file.

错误的位置是从包含出错的插值表达式的那个文本节点开始的。 如果错误是一个属性绑定，比如 [value]="person.address.street"，错误的位置就是那个包含错误的属性的位置。

The error location is the beginning of the text node that contains the interpolation expression with the error. If the error is in an attribute binding such as [value]="person.address.street", the error location is the location of the attribute that contains the error.

这个验证过程使用 TypeScript 的类型检查器，这些选项也会提供给 TypeScript 编译器以控制类型验证的详细程度。 比如，如果指定了 strictTypeChecks，就会像上面的错误信息一样报告 my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined' 错误。

The validation uses the TypeScript type checker and the options supplied to the TypeScript compiler to control how detailed the type validation is. For example, if the strictTypeChecks is specified, the error my.component.ts.MyComponent.html(1,1): : Object is possibly 'undefined' is reported as well as the above error message.

类型窄化link

Type narrowinglink

在 ngIf 指令中使用的表达式用来在 Angular 模板编译器中窄化联合类型，就像 TypeScript 中的 if 表达式一样。 比如，要在上述模板中消除 Object is possibly 'undefined' 错误，可以把它改成只在 person 的值初始化过的时候才生成这个插值。

The expression used in an ngIf directive is used to narrow type unions in the Angular template compiler, the same way the if expression does in TypeScript. For example, to avoid Object is possibly 'undefined' error in the template above, modify it to only emit the interpolation if the value of person is initialized as shown below:

      
        content_copy
      
      @Component({
  selector: 'my-component',
  template: '<span *ngIf="person"> {{person.addresss.street}} </span>'
})
class MyComponent {
  person?: Person;
}
    

使用 *ngIf 能让 TypeScript 编译器推断出这个绑定表达式中使用的 person 永远不会是 undefined。

Using *ngIf allows the TypeScript compiler to infer that the person used in the binding expression will never be undefined.

关于输入类型窄化的更多信息，请参见 Input setter 的强制类型转换和为自定义指令强化模板类型检查

For more information about input type narrowing, see Input setter coercion and Improving template type checking for custom directives.

非空类型断言操作符link

Non-null type assertion operatorlink

使用 非空类型断言操作符可以在不方便使用 *ngIf 或 当组件中的某些约束可以确保这个绑定表达式在求值时永远不会为空时，防止出现 Object is possibly 'undefined' 错误。

Use the non-null type assertion operator to suppress the Object is possibly 'undefined' error when it is inconvenient to use *ngIf or when some constraint in the component ensures that the expression is always non-null when the binding expression is interpolated.

在下面的例子中，person 和 address 属性总是一起出现的，如果 person 非空，则 address 也一定非空。没有一种简便的写法可以向 TypeScript 和模板编译器描述这种约束。但是这个例子中使用 address!.street 避免了报错。

In the following example, the person and address properties are always set together, implying that address is always non-null if person is non-null. There is no convenient way to describe this constraint to TypeScript and the template compiler, but the error is suppressed in the example by using address!.street.

      
        content_copy
      
      @Component({
  selector: 'my-component',
  template: '<span *ngIf="person"> {{person.name}} lives on {{address!.street}} </span>'
})
class MyComponent {
  person?: Person;
  address?: Address;

  setData(person: Person, address: Address) {
    this.person = person;
    this.address = address;
  }
}
    

应该保守点使用非空断言操作符，因为将来对组件的重构可能会破坏这个约束。

The non-null assertion operator should be used sparingly as refactoring of the component might break this constraint.

这个例子中，更建议在 *ngIf 中包含对 address 的检查，代码如下：

In this example it is recommended to include the checking of address in the *ngIf as shown below:

      
        content_copy
      
      @Component({
  selector: 'my-component',
  template: '<span *ngIf="person && address"> {{person.name}} lives on {{address.street}} </span>'
})
class MyComponent {
  person?: Person;
  address?: Address;

  setData(person: Person, address: Address) {
    this.person = person;
    this.address = address;
  }
}