Angular 8:将事件从一个组件发送到同级组件

Question

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

侧边栏组件有一个@ViewChild，它是来自Angular Boostrap的ngbAccordion。我想从页面组件触发其collapseAll方法。

所以侧边栏有

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

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

当"页面"组件

加载时，我想向"侧边栏"组件发出一个触发我的collapseAllAccordions函数的事件。

我知道如何使用父/子组件来做到这一点，我可以在 Google 和这里找到的大部分东西都在讨论父/子情况。 除了我的情况，它们是兄弟组件。我不知道如何照顾兄弟姐妹。

Answer 1

您可以使用以下服务：

• 将服务注入到两个同级组件中。
• 将发射器或可观察对象添加到服务。
• 在服务中添加一个函数以更改可观察值/发出新值(如果使用发射器(。
• 在"页面"组件中使用该函数。
• 订阅发射器或"侧边栏"组件中的可观察量并触发collapseAllAccordions。

Answer 2

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

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 { }
}

如果您需要进一步的帮助，请创建堆栈闪电战或代码沙箱来复制此问题。