子コンポーネントから親コンポーネントへのToggleプロパティAngular2（AngularJSの$ emitに似ています）

Question

私は現在Angular2を教えていますが、AngularJSで簡単に修正できる実用的な問題がありますが、現在私は例を見ていますAngular2の解を見つける。とにかく、私はAppと呼ばれるトップレベルのコンポーネントがあります。そのコンポーネント内には、CSSクラスを適用するプロパティがあります。ここでは、コンポーネントテンプレートとして使用されるHTMLがあります - ngClassを使用してCSSクラスを適用する場所を確認できます。 showMenuの値は単なるブール値です。ここで

<div class="navigation" role="navigation"> 
    <ul> 
     <li><a [routerLink]="['Home]">Home</a></li> 
     <li><a [routerLink]="['Mail']">Mail</a></li> 
     <li><a [routerLink]="['Friends']">Friends</a></li> 
     <li><a [routerLink]="['Games']">Games</a></li> 
    </ul> 
</div> 
<!-- below is where I wish to toggle the class --> 
<div class="site-wrap" [ngClass]="{'slide-right': showMenu}"> 
    <div class="container-fluid"> 
     <div class="row nav"> 
      <top-navigation></top-navigation> 
     </div> 
    </div> 

    <div class="container-fluid content-gradient"> 
     <div class="row"> 
      <div class="col-md-10"> 
       <router-outlet></router-outlet> 
      </div> 
      <div class="col-md-2"> 
       <contacts-list></contacts-list> 
      </div> 
     </div> 
    </div> 

    <div class="container-fluid footer"> 
     <footer-navigation></footer-navigation> 
    </div> 
</div> 

Appのコンポーネントのコード（ここでは見ることはあまりありません...）

export class App { 

    showMenu: boolean = false; 
    constructor() { 
    } 
    // I need to listen for the toggle somehow? 
    toggleMenu():void { 
     this.showMenu = !this.showMenu; 
    } 

} 

は今、あなたは私がセレクタtop-navigationと子コンポーネントを持って見ることができます。このコンポーネントTopNavigationには、親/最上位コンポーネントのshowMenuの値を切り替えるボタンのメソッドがあります。これまでのコードはここまでです（小さな抽出物）

export class TopNavigation { 

      constructor() { 
      // Things happening here 
      } 

      toggleMenu():void { 
      // I want to toggle the parent property by somekind of $emit 
      } 
    } 

ここでは、コンポーネントのテンプレートHTML（一部ではありません）です。 AngularJSで

<div class="col-xs-2 col-sm-1 hidden-md hidden-lg hamburger-menu"> 
    <button class="btn btn-default" (click)="toggleMenu()">&#9776;</button> 
</div> 

私はtoggleMenu機能に$scope.$emitを持っているでしょうし、親に私はイベントをリッスンする$scope.$onを持っているでしょう。私は現在Angular2でEventEmittersについて読んでいますが、誰かが簡単な説明や例を持っていれば、私はAngularデベロッパーにとってこれが一般的で実践的な日常業務だと思うので、特に感謝しています。

Answer 1

EventEmitterプロパティを定義する共有サービスを利用できます。 Appコンポーネントは、対応するイベントがTopNavigationコンポーネントによってトリガされたときに通知を受けるためにサブスクライブします。

• 共有サービス

  @Injectable() 
  export class MenuService { 
      showMenuEvent: EventEmitter = new EventEmitter(); 
  } 
  

  アプリケーション全体のためのサービスの同じインスタンスを共有できるようにブートストラップ機能で対応するプロバイダを定義することを忘れないでください： `ブートストラップ（アプリケーション、 [MenuService]）;

• Appコンポーネント

  @Component({ ... }) 
  export class App { 
      showMenu: boolean = false; 
      constructor(menuService: MenuService) { 
      menuService.showMenuEvent.subscribe(
       (showMenu) => { 
       this.showMenu = !this.showMenu; 
       } 
      ); 
  } 
  

  }

• TopNavigationコンポーネント：

  ：詳細については、この質問を参照してください

  export class TopNavigation { 
      constructor(private menuService: MenuService) { 
      // Things happening here 
      } 
  
      toggleMenu():void { 
      this.showMenu = this.showMenu; 
      this.menuService.showMenuEvent.emit(this.showMenu); 
      } 
  } 
  

あなたは、双方向バインディングを使用することができます

• Delegation: EventEmitter or Observable in Angular2

Answer 2

。多分一方通行は同様だろう

<top-navigation [(toggleMenu)]="showMenu"></top-navigation> 

、私はあなたが直接の親子関係を持っている場合、私はギュンターの答えを好む

<top-navigation (toggleMenuChange)="showMenu=$event"></top-navigation> 

export class TopNavigation { 
     @Output() toggleMenuChange: EventEmitter = new EventEmitter(); 

     // for two-way binding 
     @Input() toggleMenu:boolean = false; 

     constructor() { 
     // Things happening here 
     } 

     toggleMenu():void { 
     this.toggleMenu = !this.toggleMenu; 
     this.toggleMenu.emit(this.toggleMenu); 
     } 
}