Angular で双方向データバインディングを実装する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-21 16:58:11

オリジナル

1454 人が閲覧しました

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

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

Angular中，我们常常需要通过方括号[]和圆括号()实现组件间的交互：

那么在[]和()的基础上，如何实现组件的双向数据绑定？

例子如下。

子组件：

<!--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 &#39;@angular/core&#39;;
@Component({
 selector: &#39;my-app&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.css&#39;]
})
export class AppComponent implements OnInit{
 parentStatus: boolean = true;
 ngOnInit(){
 setTimeout(()=>{
  this.parentStatus = true;
 },10000);
 }
}

ログイン後にコピー

在父组件我们初始化parentStatus为true，并把它传到子组件TestDataBindingComponent。

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

Angular では、多くの場合、角括弧 []

と丸括弧 ()コンポーネント間の対話を実現します:

次に、

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

例は次のとおりです。

サブコンポーネント:

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

親コンポーネント:rrreeerrreee

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

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