web-dev-qa-db-ja.com

Angular双方向のデータバインディングと親コンポーネントの変更の監視

双方向のデータバインディングを使用する場合、親コンポーネントの変更を監視する方法はないようです。

タグリストを収集するためのカスタム入力コンポーネントがあります。双方向のデータバインディングがセットアップされ、このコンポーネントとその親の間で機能します。

// the parent component is just a form
// here is how I'm adding the child component
<input-tags formControlName="skillField" [(tags)]='skillTags' (ngModelChange)="skillTagUpdate($event)"></input-tags>

親コンポーネントで、バインドされた変数の変更をどのように監視しますか？それは常に最新ですが（私はこれを確認しました）、変更に対応するためのガイダンスを見つけることができません。

私はもう試した：

ngOnChanges(changes: SimpleChanges) {
    if (changes['skillTags']) {
        console.log(this.skillTags);  // nothing
    }
}

そして

skillTagUpdate(event){
    console.log(event); // nothing
}

PDATE： TWDB IMHOは、宣伝されているものではありません。 TWDBが解決策であると思われるこの場所に到着するたびに、代わりにサービスや観察可能な通信のために再設計します。

angulareventemittertwo-way-bindingcontrolvalueaccessor
5
Ben Racicot

実際には、実装は双方向のデータバインディングではなく、親コンポーネントと子コンポーネントが同じskillTags変数の参照を共有しているだけです。

構文[(tags)]='skillTags'は、[tags]='skillTags' (tagsChange)='skillTags = $event'の構文糖です。

次のように子コンポーネントにtagsChangeを実装する必要があります：@Output('tagsChange') tagsChange = new EventEmitter<any>();、次にtagsを子コンポーネントに変更するときはいつでも、直接実行しないでください。代わりにthis.tagsChange.emit(newValue)。

この時点で、実際の双方向データバインディングが作成され、親コンポーネントが変数の一意の所有者になります（変数に変更を適用し、子に変更をブロードキャストする責任があります）。

親コンポーネントで、_skillTags = $event_（[(tags)]='skillTags'で暗黙的に実行）以上のことを実行したい場合は、_(tagsChange)='someFunction($event)'_で別のリスナーを追加するだけです。

StackBlitzデモ

1
Guerric P

これがあなたが探しているものであるかどうかはわかりませんが、@ Input（）を使用してみましたか？

子コンポーネント内

@Input() set variableName(value: valueType) {
  console.log(value);
}

親コンポーネント内

<input-tags formControlName="skillField" [(tags)]='skillTags'
[variableName]="skillTagUpdate($event)"></input-tags>

入力関数は、関数にバインドされているオブジェクトが変更されるたびに呼び出されます。

1
kebbaben

1.output（eventemitter）を使用できます

2.最も簡単な解決策はrxjs/subjectです。それは観察者であると同時に観察可能であることができます

使用法：

1.サービスでサブジェクトプロパティを作成します。

import { Subject } from 'rxjs';

export class AuthService {
   loginAccures: Subject<boolean> = new Subject<boolean>();
}

2.子ページ/コンポーネントの使用でイベントが発生した場合：

logout(){
  this.authService.loginAccures.next(false);
}

3.そして親ページ/コンポーネントの件名にサブスクライブします：

constructor(private authService: AuthService) {
    this.authService.loginAccures.subscribe((isLoggedIn: boolean) => {this.isLoggedIn = isLoggedIn;})
}

更新

双方向バインディングの場合、viewchildを使用して子コンポーネントのアイテムとプロパティにアクセスできます

<input-tags #test></<input-tags>

およびtsファイル

  @ViewChild('test') inputTagsComponent : InputTagsComponent;

save()
{
   var childModel = this.inputTagsComponent.Model;
}
0
moha noorani