Angular 2 senden Ereignis von übergeordneten an alle Kinder

Question

Ich versuche, eine einfache Menüleiste zu implementieren. Ich habe eine Hauptmenüleiste und viele Untermenüs, die verschiedene Tiefen haben können. Ich möchte jedes Untermenü beim Schließen der Hauptmenüleiste schließen. Daher möchte ich, dass die übergeordnete Komponente ein einfaches Ereignis ohne Daten an jedes Kind sendet.

Ich möchte dies tun, ohne eine Eingabe deklarieren zu müssen, wenn eine Submenü-Komponente verwendet wird, da diese Ereignis-Subskription obligatorisch ist und für jedes Untermenü gleich ist. Die Deklaration wird also viel einfacher sein und weitere Fehler vermeiden.

Mit anderen Worten, ich habe dies in Menüleiste Komponente:

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

und will diese übergeordnete Komponente ein Ereignis zu jedem Untermenü zu senden, ohne dass etwas Derartiges zu erklären, mit:

<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

können Sie @ViewChildren verwenden, um die untergeordneten Komponenten in die übergeordneten als ViewChildren

In Ihrer Stammkomponente Sie etwas simila definieren zu injizieren müssen r zu diesem

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

export class parentMenuComponent { 

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

    constructor() { } 

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

Wo SubMenu ist der Name des Kindes Komponente

Weitere Informationen darüber, wie @ViewChild & @ViewChildren Arbeit kann here

Answer 2

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

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

finden

Auf diese Weise kann jedes Menü eine Dienstinstanz mit sich selbst und seinen Kindern teilen. Er kann Elternbenachrichtigungen abonnieren, um sich selbst zu schließen, und childs darüber informieren, dass er selbst geschlossen wird.

@SkipSelf() ist nicht die Instanz von sich selbst zu bekommen. @Optional() ist kein Fehler im Hauptmenü, die nicht von der übergeordneten injizieren kann.