转载

前端之Angular2实战：内置指令中的ngFor

Angular2 内置了许多新的指令，其中NgFor就是用来进行替换旧有的ng-repeat标签。关于Angular2开发进度可以查看 Is Angular 2 Ready? ，关于笔者的相关代码可以查看这里。

Angular1中展示列表数据的方式如下：

<!-- Angular 1.x --> <ul>     <li ng-repeat="item in items">         {{$index}} {{item}}     </li> </ul>

而如果使用ng-for的话，如下所示：

<!-- Angular 2.0 --> <ul>     <li *ng-for="#item of items; #i = index">         {{i}} {{item}}     </li> </ul>

Angular2引入了很多新的语法，其中 *ng-for 中的*是Angular2中template语法的缩写，如果是全部的话，应该为：

<!-- Angular 2.0 longhand ng-for --> <template ng-for #item="$implicit" [ng-for-of]="items" #i="index">     {{i}} {{item}} </template>

在正常的开发中，基本上不会用到这种全语法，不过知道*表达式的意义还是很有必要的。template的作用在于防止浏览器读取或者执行内部标签，这样就能够保证Angular2安全地生成模板而不需要担心被XSS等。另一个常用的表达式为 #item of items; ，#表达式会创建一个局部变量以供在template内部使用。

一个完整的ngFor指令用法如下所示：

Component

//Typescript class DisplayComponent {   myName: string;   names: Array<string>;   constructor() {     this.myName = "Alice";     this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];   } }

View

//Typescript import {Component, View, bootstrap, NgFor} from 'angular2/angular2'; @View({   template: `   <p>My name: {{ myName }}</p>   <p>Friends:</p>   <ul>      <li *ng-for="#name of names">         {{ name }}      </li>   </ul> `,   directives: [NgFor] })

当然，也可以将数据的获取写成依赖注入的模式，譬如我们创建了一个Service为：

class FriendsService {   names: Array<string>;   constructor() {     this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana", "Kai"];   } }

那么在Component中就需要引入：

@Component({   ...   appInjector: [FriendsService] }) class DisplayComponent {   myName: string;   names: Array<string>;   constructor(friendsService: FriendsService) {     this.myName = 'Alice';     this.names = friendsService.names;   } }

关于Angular2中依赖注入的解释与使用可以查看本系列其他文章。

正文到此结束