角度：将数据从组件发送到另一个组件

Question

I'm learning Angular, I have these components:

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

on the UserAddComponent on addUser method I need to read some values from the template and update users though UserServices . When it is updated, I need to call a method from the UserTableComponent in order to refresh a table with the data added to the users.

How can I call a method in one component from another component?

Answer 1

Have the parent of both components hold the list of users in a property and pass it to both children components using @Input , that way both will react whenever the list changes:

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

Alternative you can throw an event with @Output :

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

Answer 2

You could add an event (user added) in the user service. When the response is received from the user service (add an element), it can call the emit method of the corresponding event emitter. the UserTableComponent component can register on this event using the subscribe method to be notified when the event is fired.

Another approach would be to trigger this 'user added' event from the UserAddComponent component itself:

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

The other component (the table one) can use the event like this:

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

Hope it helps you, Thierry