[解決済み] Angular 2の子コンポーネントから親コンポーネントのプロパティを更新する

質問

私は @input を使って親コンポーネントからプロパティを受け取り、子コンポーネントの要素で CSS クラスをアクティブにしています。

親からプロパティを受け取り、クラスをアクティブにすることができます。しかし、これは一度しか動作しません。親から受け取っているプロパティはbooleanデータ型であり、私がその状態を false に設定しても、親コンポーネントでは変更されません。

Plunkr: https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview

app.ts

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import { HeaderComponent } from './header';
import { SearchComponent } from './header/search';

@Component({
  selector: 'my-app',
  template: `
    <app-header></app-header>
  `,
})
export class App {
  name:string;
  constructor() {
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, HeaderComponent, SearchComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

header.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `<header>
              <app-search [getSearchStatus]="isSearchActive"></app-search>
              <button (click)="handleSearch()">Open Search</button>
            </header>`
})
export class HeaderComponent implements OnInit {
  isSearchActive = false;

  handleSearch() {
    this.isSearchActive = true
    console.log(this.isSearchActive)
  }

  constructor() { }
  ngOnInit() { }
}

ヘッダ/search.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-search',
  template: `<div id="search" [class.toggled]="getSearchStatus">
              search 
              <button  (click)="getSearchStatus = false" class="close">Close Search</button>
            </div>`
})
export class SearchComponent implements OnInit {
  @Input() getSearchStatus: boolean;

  constructor() { }

  ngOnInit() {

  }
}

上記のプランカーをご確認ください。検索を開く機能は一度だけ動作します。検索を閉じた後、再び発動することはありません。

は @input はこのシナリオのための適切なユースケースですか？これを修正するのを助けてください。(プランカーを更新してください)。

どのように解決するのですか？

2Wayデータバインディングを使用する必要があります。

@Input() は1方向のデータバインディングです。 2 ウェイのデータバインディングを有効にするには @Output() を追加する必要があります。

@Input() getSearchStatus: boolean;
@Output() getSearchStatusChange = new EventEmitter<boolean>();

で、自分のプロパティに加えられた変更を親に公開したい場合、親に通知する必要があります。

this.getSearchStatusChange.emit(newValue)

で、親ではそのプロパティをバナナインアボックス記法で記述する必要があります。

[(getSearchStatus)]="myBoundProperty"

を使用すると、プロパティにバインドして、子プロパティが変更されたときにコールバックを起動することもできます。

[getSearchStatus]="myBoundProperty" (getSearchStatusChange)="myCrazyCallback($event)"

を参照してください。 plnkr