2. Angular插值语法

要在视图模板中显示的属性名称应括在双花括号中，也称为 mustache 语法。
IE

class AppComponent 
{
    propertyName: string;
    object: DomainObject;
}
{{ propertyName }}
{{ object.propertyName }}

Angular 会自动从组件中提取 propertyName和 object.propertyName的值，并将这些值插入到浏览器中。
当这些属性发生变化时，Angular 会更新显示。

5. 插值和属性绑定的区别

插值是 Angular 转换为属性绑定（一对方括号）的特殊语法。
它是属性绑定的便捷替代方案。

另一个主要区别是要将元素属性设置为非字符串数据值，我们必须使用属性绑定。

在此示例中，将根据 'isDisabled'的值禁用或者启用 OK按钮。
另一方面，无论属性值如何，“取消”按钮都将始终处于禁用状态。

export class AppComponent {
    isDisabled: boolean = true;
}
<button [disabled]='isDisabled'>OK</button>             //Data binding
<button disabled='{{isDisabled}}'>Cancel</button>       //Interpolation

1. 什么是Angular插值？

Angular插值用于使用双花括号语法在相应的视图模板中显示组件属性。

我们可以将所有类型的属性数据显示到视图中，例如字符串、数字、日期、数组、列表或者地图。

数据绑定包括单向数据绑定和双向数据绑定。
插值用于一种方式的数据绑定。
插值将数据从我们的组件向一个方向移动到 HTML 元素。

4. Angular插值示例

让我们通过以下命令使用@angular/cli 创建一个新组件。

//with inline template using '-it' flag
ng generate component greet -it

上面的命令将生成带有内联模板的 greet.component.ts。
让我们向 greet 组件添加属性 name 和 time ，如下所示：

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 会自动从“greet”组件中提取名称和时间属性的值，并将这些值插入浏览器。
当这些属性发生变化时，Angular 会更新显示。

3. Angular插值用法

• 显示简单属性 - 插值可用于在 HTML 元素标记之间和属性分配内的文本中显示和评估字符串。

<h1>Greetings {{ name }}! </h1>
<h4><img src="{{ backgroundImgUrl }}" style="height:40px"></h4>

• 计算算术表达式 - 插值的另一种用法是计算大括号中存在的算术表达式。

<h6>{{3 + 5}}</h6>   //outputs 8 on HTML browser

• 调用方法并显示返回值 - 我们还可以调用/调用插值表达式中托管组件视图的方法。

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';
}
}

• 显示数组项目 - 我们可以使用插值和 ngFor 指令来显示项目数组。

export class DomainObject 
{
  constructor(public id: number, public name: string) {
    //code
  }
}

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 文件进行组件视图，模板数据绑定对组件的属性具有相同的访问权限。