Angular で双方向データ バインディングを実装する方法

以下のエディターは、Angular カスタム コンポーネントを使用した双方向データ バインディングの実装例を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。エディターをフォローして見てみましょう

Angular を学習した学生は皆、入力ボックスが <span style="font-family:NSimsun">[(ngModel)]<code><span style="font-family:NSimsun">[(ngModel)]</span>实现双向数据绑定，那么自定义组件能不能实现双向数据绑定呢？答案是肯定的。

Angular中，我们常常需要通过方括号<span style="font-family:NSimsun">[]</span>和圆括号<span style="font-family:NSimsun">()</span>实现组件间的交互：

那么在<span style="font-family:NSimsun">[]</span>和<span style="font-family:NSimsun">()</span>的基础上，如何实现组件的双向数据绑定？

例子如下。

子组件：

<!--testDataBinding.component.html-->

<h1>childStatus: {{childStatus}}</h1>

//testDataBinding.component.ts

export class TestDataBindingComponent implements OnInit{
 @Input() childStatus;
 @Output() childStatusChange = new EventEmitter();
 ngOnInit(){
 setTimeout(()=>{
  this.childStatus = false;
  this.childStatusChange.emit(this.childStatus);
 },5000);
 }
}

注意这里的写法，这是关键所在，输出属性前半部分必须与输入属性相同，输入属性可以随意取名，输出属性需在输入属性基础上加上Change，比如你的输入属性是myData，那么输出属性就必须是myDataChange。

父组件：

<!--app.component.html-->

<test-binding [(childStatus)]="parentStatus"></test-binding>
<h1>parentStatus: {{parentStatus}}</h1>

//app.component.ts

import { Component,OnInit } from '@angular/core';
@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
 parentStatus: boolean = true;
 ngOnInit(){
 setTimeout(()=>{
  this.parentStatus = true;
 },10000);
 }
}

在父组件我们初始化<span style="font-family:NSimsun">parentStatus</span>为<span style="font-family:NSimsun">true</span>，并把它传到子组件<span style="font-family:NSimsun">TestDataBindingComponent</span>。

在子组件里，5秒后我们把<span style="font-family:NSimsun">childStatus</span>设为<span style="font-family:NSimsun">false</span>，看它能不能传到父组件。再过5秒，我们在父组件将<span style="font-family:NSimsun">parentStatus</span>设为<span style="font-family:NSimsun">true</span> バインディング、カスタム コンポーネントは双方向データ バインディングを実装できますか?答えは「はい」です。

Angular では、多くの場合、角括弧 <span style="max-width:90%">[]</span>

と丸括弧 <span style="font-family" : nsimsun>()<p></p></span>コンポーネント間の対話を実現します:

次に、

<span style="font-family:NSimsun">[]<a href="http://www.php.cn/js-tutorial-404416.html" target="_blank"></a></span> と <span style="font-family:NSimsun">()</span>、コンポーネントの双方向データバインディングを実装するにはどうすればよいですか?

例は次のとおりです。

サブコンポーネント:

rrreeerrreee ここの書き方に注意してください。ここが重要です。出力属性の前半は次と同じである必要があります。たとえば、入力属性が myData の場合、出力属性は myDataChange にする必要があります。

親コンポーネント:rrreeerrreee

親コンポーネントでは、🎜<span style="font-family:NSimsun">parentStatus を初期化します。 🎜 </span> は <span style="font-family:NSimsun">true🎜</span> であり、子コンポーネント <span style="font-family:NSimsun">TestDataBindingComponent に渡します。 🎜</span>。 🎜🎜🎜🎜 子コンポーネントで、5 秒後に <span style="font-family:NSimsun">childStatus🎜</span> を <span style="font-family:NSimsun">false🎜</span> を使用して、親コンポーネントに渡すことができるかどうかを確認します。さらに 5 秒後、親コンポーネントで <span style="font-family:NSimsun">parentStatus🎜</span> を <span style="font-family:NSimsun">true🎜 に設定します。 </span> を使用して、子コンポーネントに渡せるかどうかを確認します。 🎜🎜🎜🎜🎜🎜 子コンポーネントの値が変更されると、親コンポーネントの値も変更され、親コンポーネントの値が変更された後は、子コンポーネントの値も変更されることがわかりました。 🎜🎜双方向バインディングを実装しました! 🎜🎜上記は私があなたのためにまとめたものです。 🎜🎜関連記事: 🎜🎜🎜angularjsで棒グラフの動的読み込みを実装する方法🎜🎜🎜🎜Angularスコープでスコープを使用する方法🎜🎜🎜🎜reactを使ってメニュー権限制御を実装する方法🎜🎜🎜🎜vueの詳細な解釈。 js propsでパラメータを渡す方法🎜🎜

以上がAngular で双方向データ バインディングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。