角度：將數據從組件發送到另一個組件

Question

我正在學習Angular，我具有以下組件：

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();
    }
}

在addUser方法上的UserAddComponent上，我需要從模板讀取一些值，並通過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>

希望對您有幫助，蒂埃里