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以及SO上找到的大多数内容都讨论了父/子情况。除了我的情况，它们是同级组件。我不确定如何处理兄弟姐妹。

Answer 1

您可以使用一项服务：

将服务注入两个同级组件中。
向服务添加发射器或Observable。
在服务中添加一个函数以更改Observable的值/如果使用发射器，则发出新值。
使用“页面”组件中的功能。
在“侧边栏”组件中订阅发射器或Observable并触发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 { }
}

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

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

2 个答案: