Angular2：条件付き表示、[非表示]プロパティと* ngIfディレクティブにバインド

Question

Angular2では、<div>ブロックを条件付きで表示したいとします。次の2つの方法の違いは何ですか。

1. <div [hidden]=isLoaded>Hello World!</div>ここで、isLoadedは、対応する.tsファイルのブール値です。

2. <div *ngIf=isLoaded>Hello World!</div>

<div>がページに表示されていない場合でも、1。DOMに<div>がありますが、2。にはありません。他に違いはありますか？それぞれの長所と短所は何ですか？

Answer 1

違いは、*ngIfはDOMから要素を削除するのに対し、[hidden]は実際にdisplay:noneを設定することでCSSスタイルで再生することです。ただし、[hidden]の問題は、オーバーライドできるため、あなたの場合のようにdivが表示され、それが機能しない理由を頭に傷つけていることです。

まとめると、*ngIfと[hidden]はnotまったく同じです。前者はDOMから要素を削除し、後者はdisplay CSSプロパティを切り替えます。