Angular 2将事件从父对象发送到所有子对象

Question

我正在尝试实现一个简单的菜单栏。我有一个主菜单栏组件和许多子菜单，可以是不同的深度。我想在关闭主菜单栏时关闭每个子菜单。因此，我希望父组件向每个子组件发送一个没有任何数据的简单事件。

我希望在使用子菜单组件时不必声明任何输入，因为此事件订阅是强制的，并且对于每个子菜单都是相同的。因此，声明将更加简单，并将避免进一步的错误。

换句话说，我在菜单栏组件中有这个：

<sub-menu [title]="File">
    <sub-menu [title]="New" (onclick)="newFile()"></sub-menu>
    <sub-menu [title]="Open" (onclick)="openFile()"></sub-menu>
    <sub-menu [title]="Save" (onclick)="saveFile()"></sub-menu>
</sub-menu>
<sub-menu [title]="Edit">
    <sub-menu [title]="Copy" (onclick)="copy()"></sub-menu>
    <sub-menu [title]="Paste" (onclick)="paste()"></sub-menu>
</sub-menu>

并希望这个父组件向每个子菜单发送一个事件，而不必声明任何如下内容：

<sub-menu [title]="File" [mainClosed]="closed">
    <sub-menu [title]="New" (onclick)="newFile()" [mainClosed]="closed"></sub-menu>
    <sub-menu [title]="Open" (onclick)="openFile()" [mainClosed]="closed"></sub-menu>
    <sub-menu [title]="Save" (onclick)="saveFile()" [mainClosed]="closed"></sub-menu>
</sub-menu>
<sub-menu [title]="Edit" [mainClosed]="closed">
    <sub-menu [title]="Copy" (onclick)="copy()" [mainClosed]="closed"></sub-menu>
    <sub-menu [title]="Paste" (onclick)="paste()" [mainClosed]="closed"></sub-menu>
</sub-menu>

Answer 1

您可以使用@ViewChildren将子组件作为ViewChildren注入父组件

在您的父组件中，您需要定义类似以下内容的内容

import { ViewChildren, QueryList } from '@angular/core';

export class parentMenuComponent {

    @ViewChildren(SubMenu) allSubMenus: QueryList<SubMenu>;
    ...

    constructor() { }

    closeAll(){
        this.allSubMenus.forEach((subMenu) => subMenu.close());
    }
}

其中SubMenu是子组件的名称

有关@ViewChild和@ViewChildren如何工作的更多信息，请访问here

Answer 2

@Injectable() 
class MenuShared {
  private subject = new BehaviorSubject(null);
  readonly close:Observable = this.subject.asObservable();

  notifyClose() {
    this.subject.next(true);
  }
}

@Component({
  selector: 'sub-menu',
  providers: [MenuShared]
})
export class SubMenuComponent {
  constructor(
      private menuShared:MenuShared, 
      @SkipSelf() @Optional() private parentMenuShared:MenuShared) {
    parentMenuShared.close.subscribe((_) => {
      this.closed = true;
      this.onClose();
  }
  onClose() {
    this.menuShared.notifyClose();
  }
}

这样，每个菜单都可以与其自身及其子菜单共享一个服务实例。它可以订阅父通知来关闭自己，并通知childs自己正在关闭。

@SkipSelf()不会从自身获取实例。@Optional()不会在根菜单上出现错误，因为它不能从父级注入。