如何在Angular中的组件之间进行通信？

Question

我正在开发一个Web应用程序项目,我正在尝试使用Angular,我在组件通信方面遇到了一些问题.例如,父组件如何与子组件交换数据,如何在兄弟组件之间进行通信.

Answer 1

如果您尝试从父组件与子组件进行通信,则在角度文档中使用带@Output的@Input和EventEmitters可以非常清楚地描述这一点.

角度2分量相互作用

至于兄弟姐妹之间的沟通,我在一个类似的问题中发布了一个答案,可能有助于解决跨兄弟组件共享数据的问题.目前,我认为共享服务方法是最有效的.

角-2-兄弟组分通信

Answer 2

1. @Input和@Output

   如果有多部分组件,您可以使用@Input和@Output交换数据.文件:https://angular.io/guide/component-interaction

   示例:https://angular.io/generated/live-examples/component-interaction/eplnkr.html

2. 依赖注入

   您可以将数据存储在Service中,然后将Service注入到所需的组件中.例如示例中的"user.server.ts":

   https://angular.io/generated/live-examples/dependency-injection/eplnkr.html

Answer 3

使用服务:

import { Injectable } from '@angular/core';
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class AppState {
  public _subject = new Subject<object>();
  public event = this._subject.asObservable();

  public publish(data: any) {
    this._subject.next(data);
  }
}

你可以像这样发布类似事件的消息:

export class AppComponent {
  constructor(
    public appState: AppState
  ) {
    appState.publish({data: 'some data'});
  }
}

你可以订阅这些活动:

export class HomeComponent {
  constructor(
    public appState: AppState
  ) {
    appState.event.subscribe((data) => {
      console.log(data); // {data: 'some data'}
    });
  }
}

Answer 4

您将需要使用依赖注入。这是一个小例子： https://github.com/gdi2290/angular2do/blob/gh-pages/app/components/todo-item/todo-item.js