Angular 2의 하위 구성 요소에서 상위 구성 요소 속성 업데이트

Angular 2의 하위 구성 요소에서 상위 구성 요소 속성 업데이트

사용 중@input자식 구성 요소의 요소 중 하나에서 CSS 클래스를 활성화하기 위해 부모 구성 요소로부터 속성을 수신합니다.

나는 부모님으로부터 재산을 받을 수 있고 또한 수업을 활성화할 수 있습니다.하지만 이것은 한 번만 가능합니다.부모로부터 받는 속성은 부울 데이터를 입력한 것이며 상태를 다음으로 설정할 때false하위 구성 요소에서 상위 구성 요소는 변경되지 않습니다.

플런크르: https://plnkr.co/edit/58xuZ1uzvToPhPtOING2?p=preview

앱.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() { }
}

머리글/검색

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(바나나-a-box) 표기법을 사용해야 합니다.

[(getSearchStatus)]="myBoundProperty"

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

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

plnkr 참조

다른 접근 방식: rxjs/BehaviorSubject를 사용하여 다른 구성 요소 간에 상태를 전달합니다.
여기 플런커가 있습니다.
접미사 '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
• 상위 템플릿에서 하위의 인스턴스(instance)를 다음과 같이 가져옵니다.#as또는 어떤 이름이든.
• 다음을 사용하여 상위 항목의 검색 상태 변경#as.searchStatus어린 시절에this.searchStatus.

언급URL : https://stackoverflow.com/questions/41464871/update-parent-component-property-from-child-component-in-angular-2