[解決済み] テンプレート駆動型とリアクティブ型の実用的な違いとは?
2022-04-16 06:54:58
質問
Angular2の新しいフォームAPIについて読んでいますが、フォームには2つのアプローチがあるようです。1つはテンプレート駆動型フォーム、もう1つはリアクティブまたはモデル駆動型フォームです。
構文の違いではなく(もちろん)、実用的な使い方と、異なるシナリオでどちらのアプローチがより恩恵を受けるかを知りたいのです。 また、どちらかを選択することでパフォーマンスが向上するのでしょうか?もしそうなら、その理由も教えてください。
どのように解決するのですか?
テンプレート駆動型フォームの機能
- 簡単な操作
- シンプルなシナリオに適し、複雑なシナリオでは失敗する
- AngularJSに似ている
-
双方向のデータバインディング(using
[(NgModel)]
構文) - 最小限のコンポーネントコード
- フォームとそのデータの自動追跡(Angularで処理)
- ユニットテストはもう一つの課題
リアクティブフォームの特徴
- 柔軟性が高いが、練習が必要
- あらゆる複雑なシナリオに対応
- データバインディングを行わない(多くの開発者が好むイミュータブルデータモデル)
- コンポーネントコードが多くなり、HTMLマークアップが少なくなる
-
などのリアクティブな変換が可能になります。
- デバウンス時間によるイベント処理
- コンポーネントが変更されるまで区別される場合のイベント処理
- 動的に要素を追加する
- ユニットテストの容易化
関連
-
[解決済み] ionic 5 - ngForがデータを表示しない
-
[解決済み] インデックスを属性値とするngFor
-
[解決済み] Angular 2+でngShowとngHideに相当するものは何ですか?
-
[解決済み] NgModuleにおける宣言、プロバイダ、インポートの違いは何ですか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み】markForCheck()とdetectChanges()の違いは何ですか?)
-
[解決済み】SystemJSとWebpackの違いは何ですか?
-
[解決済み] Angular Materialダイアログエリアの外をクリックしてダイアログを閉じないようにする(Angularバージョン4.0以上で使用可能)
-
[解決済み] Angular 2 http.post()がリクエストを送信しない
-
[解決済み] VSCodeでAngularをデバッグする方法とは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ionic 5 - ngForがデータを表示しない
-
[解決済み] モジュール "@angular-devkit/build-angular" が見つかりませんでした。
-
[解決済み】Angular 6でサービスを生成する際に、InjectableデコレータでprovidedInの目的は何ですか?
-
[解決済み】コンポーネントのプロパティが現在の日付時間に依存している場合、Angular2の「expression has changed after it was checked」例外を管理する方法
-
[解決済み] npm start」と「ng serve」はいつ使う?
-
[解決済み] Angular 5 - クリップボードにコピーする
-
[解決済み] 設定ファイルにng serveのデフォルトのホストとポートを設定する。
-
[解決済み] @angular/material/index.d.ts' はモジュールではありません。
-
[解決済み] Angular2の変更検出:ネストされたオブジェクトに対してngOnChangesが発生しない
-
[解決済み] ページを離れる前に、未保存の変更点を警告する