angular2初入眼帘之-了解component

# 前集回顾

上一章里我们讲了如何为angular2搭建开发环境(还没搭起来的赶紧去看哦),并使之跑起来我们的第一个“My First Angular 2 App”。当然也有不少朋友反映环境搭建似乎比较复杂,整整一篇教程,最后只简单输出了一句话!这里我要说一句,学习新知识的确有一个阵痛的过程,尤其像angular2这种框架,引入了大量以前“前端”并不关心(没有需求)的技术栈,这使得对于之前没有接触过这些概念的朋友的学习曲线陡然飙升,相信不少人看了上一章里开篇时的那些名词后已经认识到这一点了!本教程主打实际操作,但也不会完全忽略理论,我们边做边理解。今天就接着上一章的余温,我们来写一个简单component

本章源码:component

本章使用angular2版本为:2.0.0-rc.1

先来看看我们将要完成的效果图:

angular

(注意动画的部分)非常简单的一个component,有木有?那好,我们现在要做的就是为这样一个component描述需求:

  1. 她要能接受一个object用来描述初始值,如:isChecked(是否选中)、 txt(显示文本)
  2. 当选中时,需要有横线覆盖文本;反之亦然
  3. 当用户点击复选框时,需要向上广播该事件,由父组件(调用方)决定点击时该做什么。这里我们需要在父组件里改变componentisChecked状态,并使component重绘
  4. 她必须是一个处理Unidirectional Data Flow(单向数据流)的component,意思是传入参数必须不可变(Immutable)

注:第4步里,我们使用Unidirectional Data Flow模型来更新数据,并没有涉及到任何Reactive Programming的知识点

为了完成以上需求,我们需要了解下面知识点

# 什么是component

或者这么问,AngularJS里有directiveangular2里有component,他们是什么关系?该如何理解angular2里的component?原谅我这里就不再详述AngularJS里的directive了,直接介绍component

  1. Component: 简单说,就是带templatedirective,也是最常见的组件形式。譬如:上一章中,ts/app.ts里的AppComponent
  2. Structural directive: 通过增加/删除DOM元素改变DOM布局的directive。譬如:NgForNgIf
  3. Attribute directive: 控制DOM元素显示/隐藏,或者改变元素行为的directive。譬如:NgStyle

# 设计use case

看过我之前介绍以BDD手写依赖注入(dependency injection)的朋友应该已经对"行为驱动"多少有些了解了。当我们需要设计一个API或者组件时,最佳的方式就是先设计她的使用场景,从行为开始,对该API或者组件进行描述,最后再将缺失的“实现”部分补全就可以了。

假设我们将在上一章中的AppComponent里使用这个新的component,根据之前的需求描述,我们的使用场景应该是这个样子的 :

import {Component, OnInit} from '@angular/core';

//这里CheckableItem就是我们即将设计的新component
import {CheckableItem, Item} from './CheckableItem';

//该component使用checkable-item作为selector
//并可以通过[item]属性传入一个object
//还可以通过(onItemClicked)接受一个点击事件
@Component({
    selector: 'my-app',
    template: `
    <h1>My First Angular 2 App</h1>
    <checkable-item [item]="itemInfo" (onItemClicked)="toggle($event)">
    </checkable-item>
    `,
    //引入新的CheckableItem,使之可以在AppComponent里使用
    directives: [CheckableItem]
})
export class AppComponent implements OnInit {

    itemInfo: Item;

    //当实现OnInit接口时,必须重写ngOnInit方法
    //关于OnInit,详见:
    //https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#hooks-overview
    ngOnInit() {
        //设定初始值
        //根据需求第1条,包含两个属性
        this.itemInfo = {
            isChecked: false,
            txt: 'Hello World!'
        };
    }

    //根据需求第3条,点击component后,事件要
    //冒泡到父组件(调用方)
    toggle(item: Item) {
        //当获取到CheckableItem的点击事件时,
        //给itemInfo重新赋值,并将isChecked置反
        //注:重新赋值是根据需求第4条的不可变性
        this.itemInfo = {
            isChecked: !item.isChecked,
            txt: item.txt
        };
    }
}

根据上述介绍,再结合之前的效果图,我们要做的当然就是一个标准的Component。她有template,并且包含了至少一个input和一个label标签。

有了使用场景(行为),接下来就是实现这个CheckableItem了:

touch ts/CheckableItem.ts

向刚创建的ts/CheckableItem.ts文件里写入如下内容:

import {Component, Input, Output, EventEmitter, ChangeDetectionStrategy} from '@angular/core';

@Component({
    //脏检查策略,OnPush指当且仅当传入参数的reference发生变更时
    //触发组件重绘。这和React中的shouldComponentUpdate异曲同工,
    //不过更先进(因为React还是需要手动实现的)
    //这也是上一步里itemInfo必须重新赋值的原因
    changeDetection: ChangeDetectionStrategy.OnPush,
    selector: 'checkable-item',
    //仅在当前component作用域下有效的class
    styles: [`
        .deleted{
            text-decoration: line-through;
        }
    `],
    //template就如我们需求里的描述那样,由一个input标签和
    //一个label标签组成
    template: `
    <div>
        <input type="checkbox" [ngModel]="item.isChecked" (click)="clickItem($event)">
        <label [class.deleted]="item.isChecked">{{ item.txt }}</label>
    </div>
    `
})
export class CheckableItem {
    //item被声明为Input,即会在父组件传入参数时用到
    @Input() item: Item;
    //onItemClicked被声明为Output,用来在用户点击input标签
    //时向上冒泡事件
    @Output() onItemClicked = new EventEmitter();

    //监听input上的click事件,当用户点击时,首先阻止默认行为
    //因为是否变化(重绘)是由父组件决定的
    //然后冒泡点击事件
    clickItem(e: MouseEvent) {
        e.preventDefault();
        this.onItemClicked.emit(this.item);
    }
}


export interface ToggleItemHandler {
    (item: Item): void;
}

export interface Item {
    isChecked?: boolean;
    txt?: string;
}

有朋友看到这里,对[]()之类的绑定标签表示不解,这里我们统一来解释:

  1. [target] = "expression",将右边表达式对应的值绑定到左边的target。譬如:在ts/app.ts里,我们使用[item]="itemInfo"itemInfo对应的值绑定到了组件CheckableItemitem上,这样,在CheckableItem里就可以通过this.item获取到父组件传进来的参数了。
  2. (target) = "statement",将左边的事件传递给了右边的表达式(通常就是事件处理函数)。譬如:在ts/app.ts里,我们使用(onItemClicked)="toggle($event)"CheckableItem冒泡上来的onItemClicked事件传递给了toggle函数。
  3. [class.deleted]="item.isChecked",是class的一种特殊用法,指当item.isChecked表达式为真时,为该标签的class里增加deleted;反之,则删除该标签class里的deleted

OK,事已至此,我们是不是又该启动一把程序看看效果了?

npm start

你又看到了伟大的效果:

angular

下回预告:小刀升级 - 多component协作