從組件發送數據到其他組件Angular2

Question

我學習Angular2，我有這樣的成分：

MainComponent.ts

import {Component} from 'angular2/core'; 
import {UsersTableComponent} from './UsersTableComponent'; 
import {UserAddComponent} from './UserAddComponent'; 

@Component({ 
    selector: 'main', 
    templateUrl: '../app/views/mainView.html', 
    directives: [UsersTableComponent, UserAddComponent] 
}) 

export class MainComponent { 
    constructor() {} 
} 

UserAddComponent.ts

import {Component} from 'angular2/core'; 
import {GenderPipe} from '../pipes/GenderPipe'; 

@Component({ 
    selector: 'userAdd', 
    templateUrl: '../app/views/userAdd.html', 
    pipes: [GenderPipe] 
}) 

export class UserAddComponent { 
    constructor() {} 

    addUser() { 
     alert(1); 
    } 
} 

UserTableComponent

import {Component} from 'angular2/core'; 
import {UserServices} from '../services/UserServices'; 
import {User} from '../classes/User'; 
import {GenderPipe} from '../pipes/GenderPipe'; 

@Component({ 
    selector: 'usersTable', 
    templateUrl: '../app/views/usersTable.html', 
    pipes: [GenderPipe] 
}) 

export class UsersTableComponent { 
    users: Array<User> 

    constructor(UserServices: UserServices) { 
     this.users = UserServices.getUsers(); 
    } 
} 

在UserAddComponent上ADDUSER方法，我需要閱讀從模板中的一些值，並更新用戶雖然UserServices。更新時，我需要從UserTableComponent調用一個方法，以刷新添加到用戶數據的表。

我如何可以調用其他組件的方法從另一個組件

Answer 1

有兩個組件的父在財產持有users列表，並把它傳遞給使用@Input，這樣兩個孩子部件都將作出反應時列表中的變化：

https://angular.io/docs/ts/latest/api/core/Input-var.html

替代你可以@Output拋出一個事件：

https://angular.io/docs/ts/latest/api/core/Output-var.html

Answer 2

您可以在用戶服務中添加一個事件（用戶添加）。當從用戶服務收到響應（添加一個元素）時，它可以調用相應事件發射器的emit方法。 UserTableComponent組件可以使用subscribe方法註冊此事件，以在事件被觸發時通知。

另一種方法是將觸發這個「用戶添加」從UserAddComponent組件本身事件：

@Component({ 
    (...) 
}) 
export class UserAddComponent { 
    @Output() userAdded; 

    constructor(private service:UserService) { 
    } 

    addUser() { 
    // user is linked to a form for example 
    this.service.addUser(this.user).subscribe(
     (addedUserData) => { 
     this.userAdded.emit(addedUserData); 
     } 
    } 
} 

其它成分（表中的一個）可以使用這樣的事件：

<add-user (user-added)="refreshTable()"></add-user> 

希望它可以幫助你， Thierry