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();
  }

当 "page" 组件加载时，我想向 "sidebar" 组件发出一个事件来触发我的 collapseAllAccordions 函数。

我知道如何使用 parent/child 组件执行此操作，并且我可以在 Google 和此处找到的大部分内容都讨论了 parent/child 情况。除了在我的例子中，它们是 sibling 组件。不知道怎么给兄弟姐妹。

Answer 1

您可以在这些组件之间使用中间单例服务并共享 data/actions。例如，

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 来重现此问题。

Answer 2

您可以使用服务：

• 将服务注入两个同级组件。
• 向服务添加发射器或 Observable。
• 在服务中添加一个函数来更改 Observable 的值/如果您使用发射器则发射一个新值。
• 使用 "page" 组件中的函数。
• 在您的 "sidebar" 组件中订阅发射器或 Observable 并触发 collapseAllAccordions。