Angular2: условный дисплей, привязка к свойству против * ngIf директива

В Angular2, скажем, я хочу условно отобразить блок

. В чем разница между двумя способами.

  1. Hello World!

    где isLoaded является логическим в соответствующем файле .ts .

  2. Hello World!

Я знаю, что даже если

не отображается на странице, 1. все еще имеет

в DOM, а 2. нет. Есть ли другие отличия? Каковы плюсы и минусы каждого из них?

Разница в том, что *ngIf удалит элемент из DOM, а [hidden] фактически играет с стилем CSS, установив display:none . Однако проблема с [hidden] заключается в том, что ее можно переоценить, так что div , как и в вашем случае, будет отображаться, и вы почесываете голову, почему это не работает.

Чтобы подвести итог, *ngIf и [hidden] не совпадают. Первый удаляет элемент из DOM, а последний переключает display свойства CSS.