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

在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方法在此事件上注册，以便在事件触发时得到通知。

另一种方法是触发用户添加＆＃39;来自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>

希望它可以帮到你，亨利

将数据从组件发送到其他组件Angular2

2 个答案: