Angular显示数据是通过HTML模板绑定组件类的属性。

1、语法

显示组件属性值最简单的方法是通过插值法(interpolation),由在模板中使用两个大括号 {{}} 来里面包含组件属性名来表示,比如插入一个hero名称 {{myHero.name}}

接着我们来看一个具体的示例,比如对快速入门app.component.ts 文件做一些适当的改进:

import {Component} from 'angular2/core';
@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  myHero = 'Windstorm';
}

在空组件类里添加两个属性:titlemyHero。在模板里分别使用两个大括号和属性名作为占位符表示属性值插入的位置。Angular会自动拉取这两个属性的值插入到DOM当中,当然属性值发生改变时也会跟着更新显示。更准确地说,属性重新渲染显示是发生在与视图相关的某些异步事件之后,如:点击、timer完成、异步XHR响应。

注:两个 ` 是ES2015的语法。

2、内联模板和模板文件

Angular有两种方式来存储组件模板。以内联方式使用 template 属性,或使用 templateUrl 来指定一个HTML文件,我们可任选其一。不管采用哪种方式,都不会影响数据绑定。

如果选择取决于我们怎么去组织、管理,但我的建议是采用HTML文件形式,因为实际项目当中模板内容并不像我们文章中那么短小。

3、构建函数或变量初始化

组件属性如何初始化,一种是直接变量赋值初始化,比如上面的示例代码。另一种是在构造函数里头初始化,例:

export class AppCtorComponent {
  title: string;
  myHero: string;

  constructor() {
    this.title = 'Tour of Heroes';
    this.myHero = 'Windstorm';
  }
}

两种虽然是一样,但还是直接变量赋值初始化更紧凑、美观。

4、NgFor

如果要展示一个 hero 名称,首先要在组件类创建一个数组的英雄名。

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
  myHero = this.heroes[0];
}

接着在模板当中使用 ngFor 循环指令把 hero 逐个列印出来。

  template: `
    <h1>{{title}}</h1>
    <h2>My favorite hero is: {{myHero}}</h2>
    <p>Heroes:</p>
    <ul>
      <li *ngFor="#hero of heroes">
        {{ hero }}
      </li>
    </ul>
  `

重点是我们在 <li> 元素时添加一个 *ngFor,这是Angular的循环指令,它可以帮助我们按顺序循环整个 <li> 元素以及下面的所有子元素,这里单纯只有一个插值法的属性绑定。

#hero 也叫本地模板变量(local template variable),这个定义还是要很清楚,因为未来会经常被提及。

5、创建类对象

上面我们定义都是相对于简单的基础类型,比如 title 只是一个简单的字符串类型,这与我们实际项目大相径庭,实际项目中大部是以一个更为复杂类对象存在。

现在我们来定义一个 Hero 类,它包括编号和名字,甚至更多信息。

export class Hero {
  constructor(
    public id:number,
    public name:string) { }
}

这里我们并没有做任何的属性定义,而是通过构建函数声明一个 public 级别的参数属性,这是属于TypeScript的东西。MS果然很会做语法糖,一行 public id:number 实际做了三件事:

  • 声明构造函数所需要参数与类型。
  • 定义相应的 public 级别的属性。
  • 实例时我们需要严格按照要求给定值。

怎么样?拜服了吧,语言真的是很奇妙。

6、绑定类对象

上面示例中我们把 heroes 字符串数组,更改成类数组,myHero 为第一个数组值。

heroes = [
  new Hero(1, 'Windstorm'),
  new Hero(13, 'Bombasto'),
  new Hero(15, 'Magneta'),
  new Hero(20, 'Tornado')
];
myHero = this.heroes[0];

其次更新模板内容,此时 #hero 接受的不再是一个简单字符串,而是一个 Hero 类实例对象。因此模板内容看起来是:

template: `
  <h1>{{title}}</h1>
  <h2>My favorite hero is: {{myHero.name}}</h2>
  <p>Heroes:</p>
  <ul>
    <li *ngFor="#hero of heroes">
      {{ hero.id }}:{{ hero.name }}
    </li>
  </ul>
`

7、根据条件显示 NgIf

有时需要根据条件来显示部分指定的信息,比如,当 heroes 超过3名时显示一个【显示更多】的按钮。我们可以这样:

<button *ngIf="heroes.length > 3">There are many heroes!</button>

总结

其实以上只是简单描述最重要的两个模板语法,Angular里这类语法还有包括之前提到的:NgClass、NgStyle、NgSwitch等。而显示数据不只是单纯调用一个组件类属性这么单一,它甚至还可以包括一段表达式。