2

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

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

所以侧边栏有

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


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

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

我知道如何使用父/子组件来执行此操作，并且我可以在 Google 上找到的大部分内容以及在 SO 上的内容都讨论了父/子情况。除了在我的情况下，它们是兄弟组件。我不知道如何处理兄弟姐妹。

4

2 回答 2

1

您可以使用以下服务：

  • 将服务注入到两个兄弟组件中。
  • 向服务添加发射器或 Observable。
  • 如果您使用发射器，则在服务中添加一个函数来更改 Observable 的值/发射一个新值。
  • 使用“页面”组件中的功能。
  • 在“侧边栏”组件中订阅发射器或 Observable 并触发collapseAllAccordions。
于 2019-07-12T16:12:31.653 回答
0

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

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 来复制此问题。

于 2019-07-12T16:12:30.830 回答