Angular10 の双方向バインディングを理解します。-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-09-15 10:48:25

転載

2359 人が閲覧しました

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

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

プロパティバインディング、イベントバインディング、入出力の使用について学習しました。次に、双方向バインディングについて学習します。このセクションでは、@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--;
  }
}

ログイン後にコピー

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

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

ただし、これは私たちが望む結果ではありません。親コンポーネントから 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

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

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

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 &#39;@angular/forms&#39;;
...
@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" />

ログイン後にコピー

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

エラーメッセージは、

で Angular10 の双方向バインディングを理解します。 ngModel# を使用していることを意味します。 form
フォーム ## では、name 属性を input に追加するか、[ngModelOptions]="{standalone: true}" を設定する必要があります。コードの変更: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> <form> <input type="text" [(ngModel)]="iptVal2"> <p>form 中input value is {{iptVal2}}</p> </form></pre><div class="contentsignin">ログイン後にコピー</div></div> または:

<!-- 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

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

概要: