Angular 2のコンポーネントは、そのメソッドを呼び出すことによって、別のコンポーネントをどのようにポップアップさせることができますか？

Question

私はポップアップコンポーネントを設計しました。それは、以下のメソッドをbackとのフロント変数にバインドされている変数を設定して表示し、非表示にすることを意図しています。

hide() { 
    this.back = this.back.replace(/[ ]?shown/, ""); 
    this.front = this.front.replace(/[ ]?shown/, ""); 
} 

show() { 
    this.back += "shown"; 
    this.front += "shown"; 
} 

問題は、他のコンポーネントからポップアップを呼び出すことができないようにすることです。実際、私が目指しているアプリケーションのマークアップは次のとおりです。

<navbar></navbar> 
<sidebar></sidebar> 
<filter></filter> 
<poppy></poppy> 

私はそれを呼び出す方法がわかりません。私は、ナビゲーションバーのクリックに反応して、リクエストがポップアップを引き起こすようになっていることを検知しています。

if(notImplementedYet) { 
    ??? 
} 

私はその問題を尋ねましたが、私は本当にそれにアプローチする適切な方法の明確なイメージを得ていません。たとえば、私はInputとOutputhereについて見てきましたが、私の必要性に遠隔から適用できるかどうかは判断できません。

私はまたthisを見ましたが、Angularの経験が不足している可能性がありますので、教えてくれません。また、私は親から子へ/親から子へのアプローチが非常に厄介な呼び出し構造になることを心配しています。

Answer 1

ポップアップを呼び出すコンポーネントで@Outputを使用できます。テンプレート変数を使用するだけで、ポップアップコンポーネントのshowメソッドまたはhideメソッドを呼び出すことができます。例えば

コードによってナビゲーションバーにクリックしたとき、あなたはあなたのポップアップを表示することができます。

import { Component, Output, EventEmitter } from '@angular/core'; 
@Component({ 
    selector: 'navbar', 
    templateUrl: './nav-bar.component.html' 
}) 
export class NavComponent { 
    @Output() onClickNav: EventEmitter<any> = new EventEmitter(); 
    onClick():void { 
     this.onClickNav.emit(null); 
    } 
} 

<navbar (onClickNav)="popup.show()"></navbar> 
<poppy #popup ></poppy> 

Answer 2

ViewChildをお探しの場合があります。

基本的には、子コンポーネントを参照する変数ViewChildをインスタンス化し、そのメソッドを呼び出すことができます。