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}

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

{{todo.label}}

        在上述模板中，我们遍历了控制器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属性。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！