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

我正在学习Angular，我有以下组件：

主组件

UserAddComponent.ts

用户表组件

在UserAddComponent on addUser方法上，我需要从模板中读取一些值，并通过UserServices更新用户。更新后，我需要从UserTableComponent调用一个方法，以便使用添加到用户的数据刷新表

---

如何从另一个组件调用一个组件中的方法？

让两个组件的父组件持有属性中的用户列表，并使用@Input将其传递给两个子组件，这样，当列表更改时，两者都会做出反应：

或者，您可以使用@Output引发事件：

---

您可以添加用户服务中添加的事件用户。当从用户服务add元素接收到响应时，它可以调用相应事件发射器的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);
      }
  }
}

表1中的另一个组件可以使用如下事件：

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

希望它能帮助你，

---

蒂埃里（Thierry）

当人们在没有留下评论的情况下否决投票时，会非常恼人。为什么：-/我不知道为什么我认为这是一个有效的选择，我甚至自己也提到过。但我的反馈是，这种方式打破了绑定的全部目的。它有它的用途，但如果你要发出并订阅组件之间的每一个更改，为什么你首先要使用绑定框架？@Langley:我完全明白你的意思。。。我们可以将响应内容添加到绑定数组的列表中。问题是，我们可以使用可观察管道和异步管道来显示列表……但可观察管道可以在任何地方，也可以在父管道中，并将其提供给子管道，对吗？@Langley:是的，但我的意思是如何在循环中添加新值，例如，利用异步管道。数据最初是从HTTP请求加载的，例如，如何在不再次执行HTTP请求的情况下向列表中添加元素。。。

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

@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>