Question

在根组件中，我放置了一个可以从任何地方触发的模态。但是，我实际上混淆了底层组件如何在不传递过多回调函数的情况下与顶层进行通信？

根组件

<container></container>
<modal hide="true"></modal>

容器组件

<another-container></another-container>

另一个容器组件

<child-that-trigger-modal></child-that-trigger-modal>

基本上，我希望底部组件（child-that-trigger-modal）能够以简单而优雅的方式与具有模态（root）的顶级组件通信，而不会传递太多数据和回调函数？

Answer 1

在Angular 2中，EventEmmiter发出的事件不会冒泡（发布此答案的日期）。

您可以使用可帮助您在组件之间进行通信的共享服务。

// File: app/shared.service.ts

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

import { Subject } from 'rxjs/Subject';

@Injectable()
export class SharedService {

  notify$ = new Subject<any>();

  constructor() { }

  notify(obj) {
      this.notify$.next(obj);
  }

}

现在，您已经创建了Observable和共享服务（请注意，它的单个实例将在您的组件中共享）。

如果要发送数据，可以使用.notify()功能，例如

export class ChildThatTriggerModalComponent implements OnInit {

  constructor(private sharedService: SharedService) { }

  notifyParent() {
      this.sharedService.notify({id: 1, name: 'John'});
  }

  ngOnInit() { }

}

如果你想听取任何改变，你可以subscribe到那个可观察的，例如

export class ContainerComponent implements OnInit {

  constructor(private sharedService: SharedService) {
    this.sharedService.notify$.subscribe(data => console.log(data));
  }

  ngOnInit() { }

}

Answer 2

我建议的是不要将模态绑定到根组件。相反，您的模式应该是一个服务（可能需要也可能不需要根组件作为依赖项）

然后

如果您需要/想要，请将模态服务注入根组件。
将相同的实例注入触发它的孩子（例如，确保它的单身，即在app.module中只声明一次）

我们如何与Angular中的根组件进行通信？

2 个答案: