angular2 *ngIf vs. [非表示]

クズども · 掲載地 2019/05/22 14:02:02

AngularJS 1でDOM要素の表示状態を切り替えたい場合は、ng-showやng-hideなどのAngularJS 1の組み込みコマンドを使うことになるでしょう:

AngularJS 1の例:

Angular2では、新しいテンプレート構文により、DOM要素のネイティブプロパティに式を割り当てることができます。この素晴らしい機能が無限の可能性を開きます。その一つは、式をネイティブの隠しプロパティにバインドするもので、これはng-showに似ています。また、次の要素に対してdisplay: noneも設定します:

[非表示]Angular2の例(推奨されません):

ログインが見えます。

一見すると、上記の例はAngularJS 1のng-showのように見えます。実際、そうなっています! 重要な違いです。

ng-showとng-hideの両方は、ng-hideというCSSクラスを通じてDOM要素の表示状態を制御します。このクラスは単に要素をdisplay: noeに設定します。ここでのポイントは、AngularJS 1がng-hideクラスに追加されたことです! これは、クラスの優先度を調整し、他のスタイルから要素の表示属性の割り当てを上書きできるようにします。

この例に戻りますが、ネイティブの隠し属性のdisplay: none styleはブラウザによって実装されています。ほとんどのブラウザは使っていません! 優先順位を調整することが重要だ。したがって、[hidden]="expression"で要素の表示状態を制御すると、他のスタイルによって誤って上書きされてしまうことがあります。例えば、この要素に対して別の場所でそのようなスタイルを書く場合、display: flexはネイティブの隠れプロパティよりも優先されます(こちらを参照)。

このため、通常は*ngIfを使って要素の存在状態を切り替え、同じ目的を達成します。

*ngIfのangular2例(推奨):

ログインが見えます。

ネイティブの隠しプロパティとは異なり、angular2の*ngIfはスタイル制約を受けていません。どんなCSSを書いても、彼女は安全です。ただし、*ngIfは要素の表示状態を制御するものではなく、テンプレートから要素を追加・削除することで表示・表示しない効果を直接達成する役割を果たしていることを付け加える必要があります。

もちろん、display: none !importantのようなグローバルスタイルを使って、元素の隠れ属性に隠れ優先度を加えることも可能です。 Angularグループがこれらの問題を理解しているなら、なぜフレームワーク内の隠しにグローバルで最高優先度の隠しスタイルを追加しないのかと疑問に思うかもしれません。答えは、グローバルスタイルの追加がすべてのアプリケーションに最適な選択であると保証できないということです。このアプローチは、ネイティブの隠れた機能に依存する機能を実際に壊してしまうため、選択はエンジニアに任せています。

[角] angular2 *ngIf vs. [非表示]

関連記事

閲覧したセクション