角度付き双方向バインディングの詳細な説明

角度付き双方向バインディングの詳細な説明

双方向バインディングの原理

双方向バインディングは、プロパティ バインディングとイベント バインディングを組み合わせます。

Angular の双方向バインディング構文は、角括弧と丸括弧 [()] の組み合わせです。

[] はプロパティのバインディングに使用され、() はイベントのバインディングに使用されます。

命名規則は[入力名] + 変更です。

  • プロパティ バインディング ( Input ) - 特定の要素属性を設定します。
  • イベント バインディング ( Output -output) − 要素変更イベントをリッスンします。

そのため、双方向バインディングの形式では ngModel と ngModelChange が存在し、双方向バインディングのプロパティをカスタマイズすることもできます。

ngモデル

フォーム要素への双方向バインディング

'@angular/core' から Component、OnInit をインポートします。
@成分({
  セレクタ: 'app-bind'、
  テンプレート: `
    <div>
      <div>名前: {{ name }}}</div>
      <input type="text" style="width: 300px;" nz-input name="名前" [(ngModel)]="名前" autocomplete="オフ">
    </div>
  `
})
BindComponentクラスをエクスポートし、OnInitを実装します。
  名前 = '';
  コンストラクタ() { }
  ngOnInit(): void { }
}

レンダリング

レンダリング

カスタム双方向バインディングプロパティ

コンポーネント-html

<div>
  <div>内部: {{値}}}</div>
  <input style="width: 300px;" nz-input (input)="onInput(input.value)" #input autocomplete="off">
</div>

コンポーネントts

'@angular/core' から Component、EventEmitter、Input、OnInit、Output } をインポートします。
@成分({
  セレクタ: 'app-inner'、
  テンプレート URL: './inner.component.html',
  スタイル URL: ['./inner.component.scss']
})
InnerComponentクラスをエクスポートし、OnInitを実装します。
  // 入力プロパティを設定します @Input() value!: string;
  // 出力イベントを設定します @Output() valueChange: EventEmitter<string> = new EventEmitter();
  コンストラクタ() { }
  ngOnInit(): void { }
  onInput(値: 文字列){
    // 出力イベントをトリガー - 出力データ this.valueChange.emit(value);
  }
}

外用

'@angular/core' から Component、OnInit をインポートします。
@成分({
  セレクタ: 'app-outer'、
  テンプレート: `
    <div>
      <div>名前: {{ name }}}</div>
      <app-inner [(値)]="名前"></app-inner>
    </div>
  `
})
OuterComponentクラスをエクスポートし、OnInitを実装します。
  名前 = '';
  コンストラクタ() { }
  ngOnInit(): void { }
}

レンダリング

レンダリング

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • Angularでカスタムコンポーネントの双方向バインディングを実装する2つの方法の詳細な説明
  • Angular の双方向バインディングが効かず、ng-model が正常に表示されない問題を解決
  • 双方向データバインディング時にAngular2で[(ngModel)]が使用できない問題を解決する
  • AngularJS 双方向データバインディングの原則: $watch、$apply、$digest の適用
  • Angularカスタムコンポーネントを使用した双方向データバインディングの実装例
  • AngularJs における双方向バインディングの原理 (データバインディングメカニズム) についての簡単な説明

<<:  WEBAPP開発スキルのまとめ(モバイルWebサイト開発の注意点)

>>:  CSS3 フィルター (フィルタ) ウェブページのグレーまたは黒モードのサンプルコードを実現

推薦する

40以上の美しいWebフォームデザイン例

Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...

MySQLのスローログの開き方と保存形式の詳細な分析

開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...

Linux で大きなファイルの指定された内容を見つける方法

大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...

WeChatミニプログラムは同時通訳を利用して音声認識を実装します

私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...

vue3とvue2の利点の比較

目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...

CSS画像結合技術(スプライト画像)の詳しい説明

CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...

HTML CSS を使用して div またはテーブルを指定した位置に固定する方法

CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...

Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...

React-Native環境のセットアップと基本的な紹介

環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...

HTMLタグの書き方でよくある間違い

注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...

Dockerfile における ENTRYPOINT と CMD の違い

Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...

WebプロジェクトをIdeaにインポートし、Tomcatに公開する問題を解決します

Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...

Mysql で自動増分主キー ID を更新するときに問題が発生しました

目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...

jQueryのチェーンプログラミングスタイルの詳細な例

チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...