angular2组件定义（详细）

构建一个简单的to-do应用。

to-do列表项格式如下：

interface Todo {
  completed: boolean;
  label: string;
}

首先导入所有需要用到的模块：

import {Component} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

然后声明组件以及对应的元数据：

@Component({
  selector: 'app',
  templateUrl: './app.html',
  styles: [
    `ul li {
      list-style: none;
    }
    .completed {
      text-decoration: line-through;
    }`
  ]
})

这里我们把Todo组件的选择器指定为app标签，然后添加模版的url地址，指向app.html文件，然后还使用了styles属性，其作用是给组件设置样式。

接下来是Todo应用里面模板所对应的controller实现：

class TodoCtrl {
  todos: Todo[] = [{
    label: 'Buy milk',
    completed: false
  }, {
    label: "Save the world",
    completed: false
  }];
  name: string = 'John';
  addTodo(label) {
    this.todos.push({
      label,
      completed: false
    })
  }
  removeTodo(idx) {
    this.todos.splice(idx, 1);
  }
  toggleCompletion(idx) {
    let todo = this.todos[idx];
    todo.completed = !todo.completed;
  }
}

bootstrap(TodoCtrl);

在类声明中，我们初始化了todos属性数组，在里面添加了两个todo项目：

{
    label: 'Buy milk',
    completed: false
  }, {
    label: "Save the world",
    completed: false
  }

然后更新模板把这些项目渲染出来：

<ul>
  <li *ngFor="let todo of todos; let index = index" [class.completed]="todo.completed">
    <input type="checkbox" [checked]="todo.completed"
      (change)="toggleCompletion(index)">
    {{todo.label}}
  </li>
</ul>

在上述模板中，我们遍历了控制器todos属性里面的所有todo项目。为每一个todo项目创建了一个checkbox，用来切换项目的完成状态，同时我们还利用取值指令渲染了todo项的label。

其中可看到一些之前解释过的语法：

使用(change)="statement"绑定了checkbox的change事件；
使用[checked]="expr"绑定到了todo项目上的对应属性。

为了在已完成的todo项目上显示一个中划线，我们绑定了标签的class.completed属性。为了在所有已完成的项目上应用completed这个样式类，我们使用了[class.completed]="todo.completed"。通过这种方式声明：需要根据todo.completed这个表达式的值来决定是否应用conpleted这个样式类。

与绑定样式的语法类似，angular也允许在标签上绑定style和attribute。举例：

<td [attr.colspan]="colspanCount"></td>

上述代码绑定了td标签的attr中colspan属性。

<div [style.backgroundImage]="expression"></div>

上述代码绑定了div标签的style中backgroundImage属性。

angular2组件定义（详细）

猜你喜欢