Angular10 の双方向バインディングを理解します。

次の記事では、双方向バインディングについて説明し、Angular の 2 種類の双方向バインディングについて説明します。皆様のお役に立てれば幸いです。

プロパティ バインディング、イベント バインディング、入出力の使用について学習しました。次に、双方向バインディングについて学習します。このセクションでは、@Input() と @Output() を使用して双方向バインディングについて学習します。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

定義: 双方向バインディングは、アプリケーション内のコンポーネントがデータを共有する方法を提供します。双方向バインディングを使用してイベントをリッスンし、親コンポーネントと子コンポーネントの間で値を同期的に更新します。 (実際には、@Input() と @Output() を簡略化したものです)

双方向バインディングは、大きく 2 つに分けられます。タイプ ：

1. 通常のコンポーネントの双方向バインディング

このタイプの双方向バインディングは、どのコンポーネントでも発生する可能性があります。 DOM 要素について、例を使って詳しく見てみましょう。

src/app/components/ の下にサブコンポーネントとして sizer コンポーネントを作成します:

// src/app/components/sizer/sizer.component.html
<div>
  <button class="btn btn-danger" (click)="dec()" title="smaller">-</button>
  <button class="btn btn-primary" (click)="inc()" title="bigger">+</button>
  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
</div>
// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  public size = 14;
  // ...
  dec() {
    this.size++;
  }
  inc() {
    this.size--;
  }
}

ページは次のようになり、ボタン関数が実装されています:

ただし、これは私たちが望む結果ではありません。親コンポーネントから size を渡す必要があります。 sizer コンポーネントはフォント サイズを変更します。そして、サイザー コンポーネントのボタン クリック イベントを通じて、size の変更された値が親コンポーネントに返されます。

次に、これまでの知識を使用してコードを変換します (

つまり、双方向バインディングの原理の紹介 ):

// src/app/app.component.html
// 下面的$event就是子组件传过来的值（必须是$event）
<app-sizer [size]="appFontSize" (onSizeChange)="appFontSize = $event"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

// src/app/app.component.ts
...
export class AppComponent {
  appFontSize = 14;
}

rrree

も望むものを実現します 効果:

しかし、これは面倒ではありませんか?次に、双方向バインディングが正式に表示されます。

Angular の双方向バインディング構文は、角括弧と丸括弧

[()] の組み合わせです。 [] は属性バインディングを実行し、() はイベント バインディングを実行します。次のコードを変更します:

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  // 创建输入属性size，为number或字符串类型
  @Input() size: number | string;
  // 创建自定义事件onSizeChange，需要一个number类型的参数
  @Output() onSizeChange = new EventEmitter<number>();
  ....
  dec() {
    this.resize(-1);
  }
  inc() {
    this.resize(1);
  }
  resize(step: number) {
    // 设置字体大小为12～40之间的值
    this.size = Math.min(40, Math.max(12, +this.size + step));
    // 通过事件传值
    this.onSizeChange.emit(this.size);
  }
}

// src/app/app.component.html
<app-sizer [(size)]="appFontSize"></app-sizer>
<div [style.font-size.px]="appFontSize">子组件修改后的FontSize： {{appFontSize}}</div>

関数は影響を受けないことがわかります。

2. [(ngModel)] 形式の双方向バインディング

前の基本的な 2 つに基づく-way バインディングの知識、[(ngModel)] 構文は次のように分割できます:

1.

ngModel## という名前の入力属性 #2.

ngModelChangeという名前の出力属性

#フォーム要素を単独で使用します

最初に、FormsModule

を導入する必要があります。この組み込みモジュール:

// src/app/components/sizer/sizer.component.ts
...
export class SizerComponent implements OnInit {
  @Input() size: number | string;
  // 修改事件名,********必须是：属性名 + Change 形式*********
  @Output() sizeChange = new EventEmitter<number>();
  ....
  resize(step: number) {
    this.size = Math.min(40, Math.max(12, +this.size + step));
    this.sizeChange.emit(this.size);
  }
}

コンポーネントで使用されます:

// src/app/app.module.ts 
import {FormsModule} from '@angular/forms';
...
@NgModule({
  // ...
  imports: [
    // ...
    FormsModule
  ],
  // ...
})

上記のコード行は次のとおりです。以下と同等:

<!-- src/app/app.component.html -->
<input type="text" [(ngModel)]="iptVal">
<p>input value is {{iptVal}}</p>

これは実際には非常に単純で、vue の記述方法と似ています。

タグ内で

を使用し、コードを

タグ内に記述します:

<input [value]="iptVal" (input)="iptVal = $event.target.value" />

ただし、ブラウザは次のエラーを報告することがわかります:

エラー メッセージは、

で ngModel# を使用していることを意味します。 form
フォーム ## では、name 属性を input に追加するか、[ngModelOptions]="{standalone: true}" を設定する必要があります。 コードの変更: <pre class="brush:js;toolbar:false;">&lt;!-- src/app/app.component.html --&gt; &lt;form&gt; &lt;input type=&quot;text&quot; [(ngModel)]=&quot;iptVal2&quot;&gt; &lt;p&gt;form 中input value is {{iptVal2}}&lt;/p&gt; &lt;/form&gt;</pre> または:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" name="appIput2">
  <p>form 中input value is {{iptVal2}}</p>
</form>

または:

<!-- src/app/app.component.html -->
<form>
  <input type="text" [(ngModel)]="iptVal2" [ngModelOptions]="{standalone: true}">
  <p>form 中input value is {{iptVal2}}</p>
</form>

フォーム要素で双方向バインディングを使用するのは非常に簡単です。次の点に注意してください。

FormsModule

モジュールの導入 以上です。

概要:

1. 双方向バインディングの原理は、実際には

@Input()

と ## です。 #@ Output() 組み合わせて使用​​する場合、構文は [(プロパティ名)] = "親コンポーネントのプロパティ名" となり、最初に入力をバインドし、次に出力をバインドすることに注意してください。 2. form フォームで双方向バインディングを使用するには、まず

FormsModule

組み込みモジュールを導入する必要があります。を作成し、それを input 要素 name に追加します。 プログラミング関連の知識について詳しくは、プログラミング学習をご覧ください。 ！

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