Когда следует использовать * ngIf над скрытым свойством и наоборот?

* ngIf используется, когда вы хотите, чтобы элемент DOM был динамически вставлен на основе условия. С скрытым атрибутом у вас всегда будет присутствующий элемент DOM, и вы можете получить его в любое время из DOM, но он не будет видимым (очевидно) для пользователя.

Итак, используйте * ngIf, когда вы не хотите, чтобы элемент присутствовал в DOM. Используйте скрытый элемент, если хотите, чтобы некоторые данные были сохранены (для публикации возможно, возможно, с видимыми элементами формы), и ему необходимо получить к нему доступ по какой-либо причине, сохраняя его скрытым для пользователя.

Было два случая, когда у меня были причины выбирать один из них:

• Выберите *ngIf, когда использование [hidden] вызовет проблему с производительностью (сотни скрытых тегов все еще находятся в DOM и могут вызывать вялое рендеринг вашего сайта).
• Выберите [hidden], когда вам еще нужно инициализировать скрытый компонент и передать ему события, даже если вы не собираетесь показывать это

Помимо этих 2 правил, это вопрос того, что чувствует себя правильно для вашей установки.

Я даю вам пример каждого из тех, что я нашел в реальной жизни :

Выберите *ngIf, когда использование [hidden] вызовет проблему с производительностью

Представьте, что у вас есть объект Ticket, и вы отслеживаете изменение каждого билета с помощью списка объектов Log. Каждый журнал представляет собой тип изменений, которые нужно визуализировать по-разному (например: закрытие билета создает журнал, который показывает старое и новое состояние, но добавление файла в билет показывает предварительный просмотр файла).

Одна возможная реализация использует [hidden] следующим образом:

<span [hidden]="logType !== 1">...</span>
<span [hidden]="logType !== 2">...</span>
<span [hidden]="logType !== 3">...</span>
...
<span [hidden]="logType !== 30">...</span>

Затем для каждого журнала на вашей странице вы будете иметь 29 скрытых элементов DOM. Теперь, если ваш билет сильно изменится, скажите 10 модификаций, вы получите 290 скрытых элементов в вашей DOM, которые будут использовать память и будут медленнее отображать.

В этом случае изменение [hidden] до *ngIf полностью удаляет 290 дополнительных объектов.

Выберите [hidden], когда вам еще нужно инициализировать скрытый компонент

Проверьте эту другую ситуацию:

Ticket.html

<ng-container *ngIf="numLogs > 0">
    <h1>Logs</h1>
    <ticket-logs [ticketId]="ticket.id"
                 (onNumLogsRetrieved)="setNumLogs($event)"></ticket-logs>
</ng-container>

Где setNumLogs($event) - тот, который устанавливает значение numLogs.

Обратите внимание, что с *ngIf ticket-logs компонент никогда не будет создан, поэтому numLogs всегда будет 0. В этом случае вам нужно использовать [hidden], который дает компоненту ticket-logs возможность вызвать setNumLogs, чтобы скрыть h1 и себя.

(Обратите внимание, что в этом случае мы не можем ticket-logs скрыть свое собственное содержимое, потому что мы все равно будем показывать тег h1.)