90

@input子コンポーネントの要素の 1 つで 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このシナリオの適切な使用例はありますか? これを修正するのを手伝ってください。（プランカーを更新してください）。

4

4 に答える 4

155

双方向のデータバインディングを使用する必要があります。

@Input()一方向のデータバインディングです。双方向のデータ バインディングを有効に@Output()するには、プロパティに対応するものを追加する必要があり、"Change" サフィックスを付けます。

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

プロパティに加えた変更を親に公開する場合は、親に次のように通知する必要があります。

this.getSearchStatusChange.emit(newValue)

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

[(getSearchStatus)]="myBoundProperty"

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

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

plnkrを見る

于 2017-01-04T13:29:17.173 に答える
9

別のアプローチ: rxjs/BehaviorSubject を使用して、異なるコンポーネント間でステータスを渡します。
これがplunkrです。
サブジェクトに接尾辞「Rxx」を付けたので、searchStatus の BehaviorSubject は searchStatusRxx になります。

  1. searchStatusRxx = new BehaviorSubject(false);、のような親コンポーネントで初期化します
  2. @Input を使用して子コンポーネントに渡します
  3. 子テンプレートでは、非同期パイプを行います。
  4. 親子ともにsearchStatusRxx.next(value)、最新の値を変更するようにします。
于 2017-01-04T14:00:11.167 に答える
4

コードを少し編集したところ、機能し、見た目もシンプルになりました。好きなら教えて。

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

于 2017-01-04T13:43:04.660 に答える
2

さらに別の方法。プランカー。私たちが望むのは、唯一の真実の情報源です。今度はそれを子供に入れることができます。

  • 子の初期化:searchStatus = false
  • 親テンプレートで、子のインスタンスを#as任意の名前で取得します。
  • #as.searchStatus親の usingと子のsearchStatus を変更しthis.searchStatusます。
于 2017-01-04T14:19:47.857 に答える