Избегайте задержек при использовании `* ngIf` в Angular

Question

У меня есть четыре вкладки, и четвертая должна отображаться в зависимости от того, присутствует ответ API или нет.Поэтому я использую следующий код.

<li *ngIf="notifications.length !=0">
    <a data-toggle="tab">Notifications</a>
</li>

Таким образом, проблема в том, что у него есть задержка, когда перед отображением вкладки Notifications присутствует ответ на уведомления.Сначала отображаются другие вкладки, а затем после небольшой задержки отображается вкладка уведомлений.Как я могу избежать этой задержки и показать все четыре вкладки во время загрузки страницы?

Answer 1

Вы можете использовать распознаватель маршрутов для доступа к вашей странице с вашими вкладками.

Преобразователь позволяет дождаться выполнения обещания / наблюдаемого, прежде чем разрешить навигацию по определенному маршруту.Используя ответный вызов API в качестве завершения вашей наблюдаемой, вы сможете дождаться завершения вызова для загрузки вашего компонента.

Это приведет к задержке отображения вашей страницы;Возможно, вы захотите внедрить загрузчик или что-то подобное на своей странице во время разрешения маршрута.

Вот статья с примерами о преобразователях: https://alligator.io/angular/route-resolvers/