{% raw %} # Angular 插值 > 原文： [https://howtodoinjava.com/angular/angular-interpolation/](https://howtodoinjava.com/angular/angular-interpolation/) ## 1\. 什么是 Angular 插值？ **[Angular](https://howtodoinjava.com/angular/dev-workspace-setup/) 插值**用于在具有双花括号语法的各个视图[模板](https://howtodoinjava.com/angular/angular-templates-and-views/)中显示[组件](https://howtodoinjava.com/angular/angular-component/)属性。 我们可以在视图中显示所有类型的属性数据[字符串](https://howtodoinjava.com/typescript/string-literal-types/)，数字，日期，[数组](https://howtodoinjava.com/typescript/arrays/)，列表或[映射](https://howtodoinjava.com/typescript/maps/)。 数据绑定由*单向数据绑定*和*双向数据绑定*组成。 插值用于**单向数据绑定**。 插值会将数据从我们的组件向 HTML 元素沿一个方向移动。 ## 2\. Angular 插值语法 在视图模板中显示的属性名称应括在*双花括号*中，也称为**胡子语法**。 即： ```java class AppComponent { propertyName: string; object: DomainObject; } {{ propertyName }} {{ object.propertyName }} ``` Angular 会自动从组件中提取`propertyName`和`object.propertyName`的值，并将这些值插入浏览器。 这些属性更改时，Angular 会更新显示。 ## 3\. Angular 插值用法 1. **显示简单属性** – 插值可用于显示和求值 HTML 元素标签之间以及属性分配内的文本字符串。 ```java <h1>Greetings {{ name }}! </h1> <h4><img src="{{ backgroundImgUrl }}" style="height:40px"></h4> ``` 2. **求值算术表达式** – 插值的另一种用法是求值花括号内的算术表达式。 ```java <h6>{{3 + 5}}</h6> //outputs 8 on HTML browser ``` 3. **调用方法并显示返回值** – 我们还可以在插值表达式内的宿主组件视图上调用/调用方法。 ```java import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-greet', template: ` <h1>Greetings {{ name }}! </h1> <h2>Have a good {{ getTime() }}!</h2> `, styleUrls: ['./greet.component.css'] }) export class GreetComponent implements OnInit { name: string = "John Doe"; getTime(): string { return 'morning'; } } ``` 4. **显示数组项** – 我们可以将插值与`ngFor`指令一起使用以显示数组项。 ```java export class DomainObject { constructor(public id: number, public name: string) { //code } } ``` ```java import { DomainObject } from './domain'; @Component({ selector: 'app-root', template: ` <h1>{{title}}</h1> <h2>The name is : {{domainObjectItem.name}}</h2> <p>Data Items:</p> <ul> <li *ngFor="let d of domainObjects"> {{ d.name }} </li> </ul> ` }) export class AppComponent { title = 'App Title'; domainObjects = [ new DomainObject(1, 'A'), new DomainObject(2, 'B'), new DomainObject(3, 'C'), new DomainObject(4, 'D') ]; domainObjectItem = this.domainObjects[0]; } ``` > 我们使用内联模板或单独的 HTML 文件进行组件视图，模板数据绑定都具有对组件属性的相同访问权限。 ## 4\. Angular 插值示例 通过以下命令，使用`@angular/cli`创建一个新组件。 ```java //with inline template using '-it' flag ng generate component greet -it ``` 上面的命令将使用内联模板生成“`greet.component.ts`”。 让我们将属性`name`和`time`添加到问候组件中，如下所示： ```java import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-greet', template: ` <h1>Greetings {{name}}! </h1> <h2>Have a good {{time}}!</h2> `, styleUrls: ['./greet.component.css'] }) export class GreetComponent implements OnInit { name: string = "John Doe"; time: string = "morning"; } ``` Angular 会自动从“问候”组件中提取`name`和`time`属性的值，并将这些值插入浏览器。 这些属性更改时，Angular 会更新显示。 ## 5\. 插值和属性绑定之间的区别 插值是 Angular 转换为属性绑定（一对方括号）的一种特殊语法。 这是属性绑定的便捷替代方法。 另一个主要区别是，要将元素属性设置为**非字符串数据值**，我们必须使用属性绑定。 在此示例中，将基于`'isDisabled'`的值禁用或启用`OK`按钮。 另一方面，无论属性值如何，`Cancel`按钮将始终被禁用。 ```java export class AppComponent { isDisabled: boolean = true; } <button [disabled]='isDisabled'>OK</button> //Data binding <button disabled='{{isDisabled}}'>Cancel</button> //Interpolation ``` 学习愉快！ {% endraw %}