Javascript 角度8：将事件从一个组件发送到同级组件

我有一个边栏组件和一个页面组件

侧栏组件有一个

@ViewChild

，它是来自的

ngbacordion

。我想从页面组件触发它的

collapseAll

方法

因此，侧边栏

  @ViewChild('webAccordion', { static: false })
  webAccordion: NgbAccordion;
  @ViewChild('pageAccordion', { static: false })
  pageAccordion: NgbAccordion;


  collapseAllAccordions() {
    this.webAccordion.collapseAll();
    this.pageAccordion.collapseAll();
  }

当“页面”组件加载时，我想向“侧边栏”组件发出一个事件，触发我的

collapseallacordins

函数

---

我知道如何使用父/子组件来实现这一点，我可以在Google和这里找到的大部分内容都讨论了父/子情况。除了在我的例子中，它们是兄弟组件。我不知道如何处理兄弟姐妹。

您可以在这些组件之间使用中间单例服务，并共享数据/操作。比如说,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SideBarComponent implements OnInit {
  constructor(private service: AppService) { }

  onClick() {
    this.service.collapse();
  }

  ngOnInit(): void { }
}


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-page',
  templateUrl: './page.component.html',
  styleUrls: ['./page.component.scss']
})
export class PageComponent implements OnInit {
  constructor(private service: AppService) { 
    // Create a observable object which listens to service and 
    // change the behaviour of current page component and vice versa
  }

  ngOnInit(): void { }
}

如果您需要进一步帮助，请创建stackblitz或codesandbox来复制此问题。

您可以使用以下服务：

• 将服务注入两个同级组件
• 向服务添加发射器或可观察对象
• 如果您使用发射器，请在服务中添加一个函数，以更改可观察/发射的值
• 使用“页面”组件中的函数
• 订阅“侧边栏”组件中的发射器或可观察对象，并触发

  collapseallacordins

---

您能否创建stackblitz或codesandbox来复制此问题？我可能会使用此功能，谢谢