Angular 2의 자식 구성 요소에서 부모 구성 요소 속성 업데이트

@input하위 구성 요소의 요소 중 하나에서 CSS 클래스를 활성화하기 위해 부모 구성 요소에서 속성을받는 데 사용 하고 있습니다.

부모로부터 속성을 받고 클래스를 활성화 할 수 있습니다. 그러나 이것은 한 번만 작동합니다. 부모로부터받는 속성은 부울 데이터 형식이며 false자식 구성 요소에서 상태를 설정하면 부모에서 변경되지 않습니다.

플 런커 : 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() { }
}

header / 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이 시나리오에 대한 적절한 사용 사례는 무엇입니까? 이 문제를 해결하도록 도와주세요. (플 런커를 업데이트하십시오).

양방향 데이터 바인딩을 사용해야합니다.

@Input()단방향 데이터 바인딩입니다. 양방향 데이터 바인딩을 사용하려면 @Output()"변경"접미사와 함께 속성에 해당하는 항목을 추가해야합니다.

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

귀하의 자산에 대한 변경 사항을 부모에게 게시하려면 부모에게 다음과 같이 알려야합니다.

this.getSearchStatusChange.emit(newValue)

부모에서 해당 속성에 대해 banana-in-a-box 표기법을 사용해야합니다.

[(getSearchStatus)]="myBoundProperty"

속성에 바인딩하고 자식에서 변경 될 때 콜백을 트리거 할 수도 있습니다.

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

plnkr 참조

또 다른 접근 방식 : rxjs / BehaviorSubject를 사용하여 서로 다른 구성 요소간에 상태를 전달합니다.
여기에 plunkr가 있습니다.
접미사 'Rxx'로 제목을 지정하므로 searchStatus의 BehaviorSubject는 searchStatusRxx가됩니다.

1. 같은 부모 구성 요소에서 초기화하십시오 searchStatusRxx = new BehaviorSubject(false);.
2. @Input을 사용하여 자식 구성 요소에 전달하십시오.
3. 자식 템플릿에서 비동기 파이프를 수행합니다.
4. 부모와 자식 모두 searchStatusRxx.next(value)에서 최신 값을 변경해야합니다.

코드를 약간 편집하면 작동하고 더 간단하게 보입니다. 당신이 그것을 좋아한다면 말해.

https://plnkr.co/edit/oJOjEZfAfx8iKZmzB3NY?p=preview

또 다른 방법. 플 런커 . 우리가 원하는 것은 진실의 단일 소스입니다. 이번에는 아이에게 넣을 수 있습니다.

• 자식 초기화 : searchStatus = false
• 부모 템플릿에서 자식의 인스턴스를 #as또는 다른 이름 으로 가져옵니다 .
• 부모에서 #as.searchStatus및 자식을 사용하여 searchStatus를 변경합니다 this.searchStatus.