双方向バインディングの原理双方向バインディングは、プロパティ バインディングとイベント バインディングを組み合わせます。 Angular の双方向バインディング構文は、角括弧と丸括弧 [()] の組み合わせです。 [] はプロパティのバインディングに使用され、() はイベントのバインディングに使用されます。 命名規則は[入力名] + 変更です。
そのため、双方向バインディングの形式では 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 のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: WEBAPP開発スキルのまとめ(モバイルWebサイト開発の注意点)
>>: CSS3 フィルター (フィルタ) ウェブページのグレーまたは黒モードのサンプルコードを実現
Web フォームは、訪問者と Web サイト所有者間の主要なコミュニケーション チャネルです。フィー...
開発プロジェクトでは、MySQL のスロークエリログを通じて効率の問題のある SQL を監視できます...
大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...
私は同時通訳音声認識機能を使用して、WeChatアプレットのホームページの音声検索機能を実現しました...
目次利点1: diffアルゴリズムの最適化利点2: ホイスト静的静的リフティング利点3: cache...
CSS画像結合技術1. 画像のステッチ画像ステッチング技術は、個々の画像を収集する技術です。画像の多...
最近、VMware 仮想マシンで CentOS を試していたのですが、インストール後にインターネット...
CSSコードコンテンツをクリップボードにコピー.bottomTable{背景色: rgb (249,...
序文この記事では、最近私が遭遇した 2 つの状況について説明します。今後、新たな発見があれば追加して...
環境の準備1. 環境構築React Native 中国語ウェブサイト2. 開発ツール フロントエンド...
注意を払う必要があります。HTML Police がコードを調べて、意味のないタグをすべて見つけ出す...
Docker システムの学習チュートリアルでは、Dockerfile を使用して Docker イメ...
Idea は既存の Web プロジェクトをインポートして Tomcat に公開しますが、Tomcat...
目次自動インクリメント ID を更新する理由は何ですか?質問解決方法これは私が知っている問題ですが、...
チェーンプログラミングの実装原理jQuery を使用すると、開発者は常にドット構文を使用して独自のメ...