Angular5.0 的事件訂閱
Angular 範例程式中，最有名(?)的除了官網的 Hero 之外，還有 TodoMVC ， 進入到 Angular5.0 之後，當然也不能免俗的要再改寫一次。 在 Angular5.0，最重要的改變就是引進了 RxJS 的 Observable 用法； 也就是 Observable(被觀察者) / Observer(觀察者)。 觀察者樣式最常見的實作範例就是 “事件” ， 在程式中可以訂閱按鈕的 click 事件 – Observer(觀察者) 按鈕被按下之後，clickEvent 會被拋出 – 按鈕是 Observable(被觀察者) 在 Angular4.0裡，是使用 Promoise 來實作非同步的資料提供者 - TodoService， 以下是4.0寫法：(範例僅保留關鍵，非完整程式) src/app/todo/todo.service.ts import { Injectable } from '@angular/core'; @Injectable() export class TodoService { private todos: ToDo[] = []; constructor() { } get() { return new Promise(resolve => resolve(todos)); } } src/app/todo/todo.component.ts import { Component, OnInit } from '@angular/core'; import { TodoService } from './todo.service'; export class TodoComponent implements OnInit { private todos; constructor(private todoService: TodoService) { } getTodos(){ return this.todoService.get().then(todos => { this.todos = todos; })
