angular2の入力と出力

Question

私はangular2アプリケーションを作成しています。私は親コンポーネントに含まれている他のコンポーネントで構成されている（ただし重要ではない）子コンポーネント（MountainListComponent）を持っています。 山のリスト（<my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>）を持つ子コンポーネントでは、山をクリックすると、親コンポーネントにブール変数（hidelist）を渡したいと思います。

これらの2つのコンポーネントのコードは以下のとおりです。 定型記号を削除しました。

親コンポーネント：

import {Component, Input} from "angular2/core"; 
import {MountainListComponent} from "./mountain-list.component"; 

@Component({ 
    selector: 'my-mountains', 
    template: `hidelist value: {{hidelist}} 
     <div class="row spacing" (childChanged)="hidelist=$event" *ngIf="!hidelist"> 
      <my-mountain-list></my-mountain-list> 
     </div> 
    ` 
}) 

export class MountainsComponent { 
    hidelist = false; 
} 

子コンポーネント：

import {Component, Output, EventEmitter} from "angular2/core"; 
import {MountainComponent} from "./mountain.component"; 
import {Mountain} from "./mountain"; 

@Component({ 
    selector: 'my-mountain-list', 
    template: ` 
     <section class="col-md-12"> 
      <my-mountain class="col-md-4" *ngFor="#mountain of mountains" [mountain]="mountain" (click)="onChange()"></my-mountain>  
     </section> 
    `, 
    directives: [MountainComponent], 
    outputs: ['childChanged'] 
}) 

export class MountainListComponent implements OnInit { 
    childChanged = new EventEmitter<boolean>(); 

    onChange() { 
     var hidelist: boolean; 
     hidelist = true; 
     this.childChanged.emit(hidelist); 
    } 
} 

問題がhidelist変数の値は、あなたがそのコンポーネントを参照することができるより

Answer 1

は、テンプレート変数#mountainを追加し、常に偽であるということですイベントの式で：

<my-mountain class="col-md-4" 
    *ngFor="#mountain of mountains" [mountain]="mountain" 
    #mountain 
    (click)="onChange(mountain.hidelist)"></my-mountain> 

Answer 2

divからカスタムイベントバインディングを次のような<my-mountain-list>コンポーネントに移動します。

import {Component, Input} from "angular2/core"; 
import {MountainListComponent} from "./mountain-list.component"; 

@Component({ 
    selector: 'my-mountains', 
    template: `hidelist value: {{hidelist}} 
     <div class="row spacing" *ngIf="!hidelist"> 
      <my-mountain-list (childChanged)="hidelist=$event"></my-mountain-list> 
     </div> 
    ` 
}) 

export class MountainsComponent { 
    hidelist = false; 
} 

- ：私は親コンポーネントを更新した

<my-mountain-list (childChanged)="hidelist=$event"></my-mountain-list>