Было два случая, когда у меня были причины выбирать один из них:
*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
.)