迈向angularjs2系列(3):组件详解

一: 以组件开发一个to-do list应用

1.启动server:

进入switchingToNG2/switching-to-angular2目录，运行npm start，那么打开浏览器，进入红色框的链接。

2.进入switching-to-angular2/app/ch4/ts/todo-app目录。

app.ts:

todo组件分为导入、接口定义、顶层组件、控制器、启动5个部分。

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

//接口定义
interface Todo {
  completed: boolean;
  label: string;
}

//顶层组件
@Component({
  selector: 'app',
  templateUrl: './app.html',
  styles: [
    `ul li {
      list-style: none;
    }
    .completed {
      text-decoration: line-through;
    }`
  ]
})
//控制器
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);

(1)组件样式

我们直接在组件装饰器加入styles属性。

  app/ch4/ts/todo-app/app.ts的样式代码:

@Component({
  selector: 'app',
  templateUrl: './app.html',
  styles: [
    `ul li {
      list-style: none;
    }
    .completed {
      text-decoration: line-through;
    }`
   //styles属性，值为数组。
  ]
})

(2)组件控制器

app.ts控制器代码:

//控制器
class TodoCtrl {
  todos: Todo[] = [{
    label: '呼风唤雨',
    completed: false
  }, {
    label: "保护妹妹",
    completed: false
  }];
  //todos数组。包含两个元素，每个元素的变量指定为Todo。
  name: string = '爱莎';
  //name属性
  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;
  }
  //切换完成或者未完成
}

(3)模板app.html内容:

<h1>你好 {{name}}!</h1>

<p>
  添加todo:
  <input #newtodo type="text">
  <button (click)="addTodo(newtodo.value); newtodo.value = ''">Add</button>
</p>

<p>to-do清单:</p>

<ul>
  <!--遍历todos数组-->
  <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>

● <li *ngFor="let todo of todos; let index = index" [class.completed]="todo.completed"> 这里使用了index索引。

● (change)="toggleCompletion(index)" 绑定了toggleCompletion函数到change事件上。

● [checked]="todo.completed" 绑定了控制器的todos数据的completed到checked属性上。

●   [class.completed]="todo.completed" 意思是如果todo.completed为true，那么添加completed类。angular也允许绑定style和attribute的。

最后启动app的时候，要把控制器传进去。

//启动
bootstrap(TodoCtrl);

打开http://localhost:5555/dist/dev/ch4/ts/todo-app/，结果为

3.组件的用户交互

实现toggleCompletion方法。它是控制器里定义的，所以直接使用咯。

toggleCompletion(idx) {
  let todo = this.todos[idx];
  todo.completed = !todo.completed;
}
//切换完成或者未完成的状态

实现addToDo方法，用来添加todo元素。

addTodo(label) {
    this.todos.push({
      label,
      completed: false
    })
  }
  //用于添加元素

通过button按钮添加元素如图:

4.app组件的切分

先来看一下指令API的输入输出。可以把指令接受的属性看成输入。把指令触发的事件看成输出。使用第三方库的指令时最主要的关注点就是输入和输出，这些内容构成了指令的API。

如果把todo应用切分成多个独立的组件，组件之间存在交互，那么分析一下这个todo应用咯。

最外层的方框代表整个todo应用。内部的第一个方框有一个组件，用来新建todo项目。下面的方框用来存储所有的项目。

根据分析，我们可以定义3个组件:

●TodoApp

●InputBox

●TodoList

5.InputBox组件:关注输入和输出

app/ch4/ts/inputs-outputs/app.ts完整的代码:

//导入
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

//todo接口
interface Todo {
  completed: boolean;
  label: string;
}

//InputBox组件
@Component({
  selector: 'input-box',
  template: `
    <input #todoInput [placeholder]="inputPlaceholder">
    <button (click)="emitText(todoInput.value); todoInput.value = '';">
      {{buttonLabel}}
    </button>
  `
})
class InputBox {
  @Input() inputPlaceholder: string;
  @Input() buttonLabel: string;
  @Output() inputText = new EventEmitter<string>();
  emitText(text: string) {
    this.inputText.emit(text);
  }
}
//ToDoList组件
@Component({
  selector: 'todo-list',
  template: `
    <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>
  `,
  styles: [
    `ul li {
      list-style: none;
    }
    .completed {
      text-decoration: line-through;
    }`
  ]
})
class TodoList {
  @Input() todos: Todo[];
  @Output() toggle = new EventEmitter<Todo>();
  toggleCompletion(index: number) {
    let todo = this.todos[index];
    this.toggle.emit(todo);
  }
}
//TodoApp组件
@Component({
  selector: 'todo-app',
  directives: [TodoList, InputBox],
  template: `
    <h1>Hello {{name}}!</h1>

    <p>
      Add a new todo:
      <input-box inputPlaceholder="New todo..."
        buttonLabel="Add"
        (inputText)="addTodo($event)">
      </input-box>
    </p>

    <p>Here's the list of pending todo items:</p>
    <todo-list [todos]="todos"
      (toggle)="toggleCompletion($event)">
    </todo-list>
  `
})
class TodoApp {
  todos: Todo[] = [{
    label: 'Buy milk',
    completed: false
  }, {
    label: "Save the world",
    completed: false
  }];
  name: string = 'John';
  addTodo(label: string) {
    this.todos.push({
      label,
      completed: false
    });
  }
  toggleCompletion(todo: Todo) {
    todo.completed = !todo.completed;
  }
}
//启动
bootstrap(TodoApp);

InputBox组件:

首先看模块的引入。

//导入
import {Component, Input, Output, EventEmitter} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';

引入了@Component, @Input, @Output,装饰器和EventEmitter类。@Input和@Output用来声明组件的输入和输出。EventEmitter是一个通用类，可接收泛型参数，它和@output装饰器结合使用，用来产生输出。

再来看组件的声明。 

//InputBox组件
@Component({
  //需要传对象字面量的组件装饰器
  selector: 'input-box',
  template: `
    <input #todoInput [placeholder]="inputPlaceholder">
    <button (click)="emitText(todoInput.value); todoInput.value = '';">
      {{buttonLabel}}
    </button>
  `
})
  //定义了输出和输入的InputBox类
class InputBox {
   @Input() inputPlaceholder: string; 
  @Input() buttonLabel: string;
  @Output() inputText = new EventEmitter<string>();
  emitText(text: string) {
    this.inputText.emit(text);
  }
}

 <input #todoInput [placeholder]="inputPlaceholder"> 模板声明了一个id名为todoInput的文本输入框，placeholder的值为inputPlaceholder，它也是InputBox类定义的第一个输入项

 @Input() inputPlaceholder: string; 。buttonLabel也是类似的需要在InputBox类中通过@Input @Input() buttonLabel: string; 定义输入项。

 (click)="emitText(todoInput.value); todoInput.value = '';" 有点长，分别解读。首先来看点击click，那么执行emitText函数，并且todoInput的value设置为空。那么对应输出项定义如下。

@Output() inputText = new EventEmitter<string>();
  //定义了一个名称为inputText的输出，初始值为EventEmitter。
  //所有组件的输出内容都是EventEmitter<string>的实例
  emitText(text: string) {
    //emitText内部调用了inputText实例的emit方法，把文本输入框的值作为参数传递过去。
    this.inputText.emit(text);
  }

inputText最终是在input-box的组件中使用。

<input-box inputPlaceholder="New todo..."
        buttonLabel="Add"
        (inputText)="addTodo($event)">
      </input-box>

类似的ToDoList组件:

只看类的定义

class TodoList {
  @Input() todos: Todo[];
  //todos是ngFor指令接收的参数，那么是组件的输入
  @Output() toggle = new EventEmitter<Todo>();
  //只要todo项目的完成状态发生改变，组件都会触发change事件。属于组件的输出。
  toggleCompletion(index: number) {
    let todo = this.todos[index];
    this.toggle.emit(todo);
  }
}

6.传递输入与使用输出结果

定义好了组件如何把它们整合起来实现完整的应用呢？

最后看一下TodoApp组件，通过 bootstrap(TodoApp); 可以看出TodoApp是最顶层的组件，如何整合到一起的，就看装饰器的模板，魔法就在这里。

 <h1>Hello {{name}}!</h1>

    <p>
      Add a new todo:
      <input-box inputPlaceholder="New todo..."
        buttonLabel="Add"
        (inputText)="addTodo($event)">
      </input-box>
      <!--使用了input-box组件，
      使用了组件定义的输入项inputPlaceholder和buttonLabel。如果值是表达式，需要裹一层方括号
      使用了输出项inputText-->
    </p>

    <p>Here's the list of pending todo items:</p>
    <todo-list [todos]="todos"
               
      (toggle)="toggleCompletion($event)">
      
    </todo-list>
    <!--输入项todos，因为值是变量，所以裹了一层方括号-->
    <!--输出项toggle->

事件冒泡的分析:

<input-box inputPlaceholder="New todo..."
        buttonLabel="Add"
        (click)="handleClick($event)"
        (inputText)="addTodo($event)">
      </input-box>
<!--假设有click事件咯-->

<!--input-box模板的内容-->
<input #todoInput [placeholder]="inputPlaceholder">
    <button (click)="emitText(todoInput.value); todoInput.value = '';">
      {{buttonLabel}}
    </button>

angular的事件冒泡与DOM事件相同。用户点击input-box组件内部模板中的按钮，就会执行handleClick($event)表达式。handleClick的第一个参数有一个属性叫target，指向按钮，但currentTarget属性指向input-box标签。

同时，要强调的是EventEmitter触发的事件是不会冒泡的。

7.重命名组件的输入输出

首先在input和outut装饰器重命名:

class TodoList {
  @Input('todos') todosList: Todo[];
  //todos重命名
  @Output('toggle') toggleEvent = new EventEmitter<Todo>();
  //toggle重命名
  toggle(index: number) {
    let todo = this.todos[index];
    this.toggle.emit(todo);
  }
}

然后在使用的地方依然保持一致就好了。

<todo-list [todos]="todos"
               
      (toggle)="toggleCompletion($event)">
      
    </todo-list>

二: 内容投影详解

 1.ng-content指令的使用

app/ch4/ts/ng-content/app.ts节选:

@Component({
  selector: 'fancy-button',
  template: '<button>点击我</button>'
})
class FancyButton { /* Extra behavior */ }
//组件设置了内联模板和选择器

那么我们就可以使用该组件了。

<fancy-button></fancy-button>

这里的fancy-button组件可复用并不高，那么使用ng-content指令就可以动态修改标签了。接下来的使用是组件的标签内容就可以替换ng-content指令所占的内容了。

@Component({
  selector: 'fancy-button',
  template: '<button><ng-content></ng-content></button>'
})
class FancyButton { /* Extra behavior */ }

在顶级组件的装饰器模板里可以看到使用方法

@Component({
  selector: 'app',
  template: `
    <fancy-button>
      <span>I will <i>be</i> projected</span>
    </fancy-button>
   //fancy-button的使用
    <br>
    <panel>
      <panel-title>Sample title</panel-title>
      <panel-content>Content</panel-content>
    </panel>
  `,
  directives: [FancyButton, Panel]
})

2.投射多块内容

例如panel组件，包含标题区域和主题区域。

<div class="panel">
      <div class="panel-title">
        标题区域
      </div>
      <div class="panel-content">
       主题区域
      </div>
 </div>`

那么我们定义组件就可以这样做了

@Component({
  selector: 'panel',
  styles: [
    `.panel {
       auto;
      display: inline-block;
      border: 1px solid black;
    }
    .panel-title {
      border-bottom: 1px solid black;
      background-color: #eee;
    }
    .panel-content,
    .panel-title {
      padding: 5px;
    }`
  ],
  template: `
    <div class="panel">
      <div class="panel-title">
        <ng-content select="panel-title"></ng-content>
        <!--标题区域-->
      </div>
      <div class="panel-content">
        <ng-content select="panel-content"></ng-content>
       <!--主题区域-->
      </div>
    </div>`
})
class Panel { }

重点看组件的模板。定义了一个class为panel的div,包含标题区域和主体区域。通过selet属性匹配panel内部的标签。

3.组件嵌套

@Component({
  selector: 'sample-component',
  template: '<view-child></view-child>'
})
class Sample { /* Extra behavior */ }

嵌套的代码

<sample-component>
  <content-child></content-child>
</sample-component>