Question

我的app.component中有一个侧边栏。我希望能够从多个子组件中进行更新。这里有一个有关如何将数据从子组件发送到父组件的示例：

https://dzone.com/articles/understanding-output-and-eventemitter-in-angular

但是该示例将父对象绑定到特定的子组件：

import { Component, OnInit } from '@angular/core';
@Component({
    selector: 'app-root',
    template: `<app-child></app-child>`
})
export class AppComponent implements OnInit {
    ngOnInit() {
    }
}

如您所见，模板绑定到特定于应用子级。您如何制作更通用的解决方案，以便多个孩子可以发送事件以更新菜单？

Answer 1

通过服务进行的通信使其保持完全通用。这不仅限于父子通信，而是任意两个组件之间的通信：

文档在这里-https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

基本上，要发送数据的组件将数据发送到服务方法。然后，该服务向主题发出（next(data)）。订阅该主题的任何人都将接收到数据。

这些天您可以使用以下方法在根级别提供服务：

@Injectable({
  providedIn: 'root'
})

不必在提供程序数组中列出它。我认为这只是Angular 6。然后按需加载服务。或者，您可以通过providers数组提供服务。

如果您想了解更多技术信息，请访问ngrx，它提供了一个全球商店解决方案。

Answer 2

我能想到的一种方法是提供诸如侧边栏服务之类的东西，您的侧边栏组件将注入该服务。

在侧边栏服务中，您可以拥有一个BehaviourSubject，子组件也可以访问它并发出值，您可以在侧边栏组件中侦听并相应地做出反应。

编辑-正如我发布的那样，另一个答案可以证实我的想法！

来自多个子代的输出和发射器

2 个答案: