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

あなたが何かsimilaを定義する必要があなたの親コンポーネントでViewChildren

として親に子コンポーネントを注入する@ViewChildrenを使用することができます

Answer 1

SubMenuは、子コンポーネントの名前です。この

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

export class parentMenuComponent { 

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

    constructor() { } 

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

にR

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

このようにして、各メニューはサービスインスタンスを自分自身とその子と共有できます。親通知をサブスクライブして自身を閉じ、子が閉じられたことを通知することができます。

はインスタンス自体を取得しないことです。 @Optional()は、親から注入できないルートメニューにエラーを表示しません。