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

Как вы собираетесь управлять всем этим в angular??

Ну, Angular предоставляет вам различные события и свойства маршрутизатора, которые вы можете использовать для отслеживания, на каком маршрутизаторе в данный момент находится пользователь.

Мы будем обсуждать событие NavigationEnd маршрута Angular

Что такое Конец навигации??

Событие, инициированное при успешном завершении навигации.

Как использовать??

  • Внутри конструктора вы подписываетесь на события маршрутизатора.
  • Затем вы проверите, является ли подписанный val экземпляром Navigation End или нет.
  • Если да, то вы будете использовать это подписанное значение и использовать value.url, чтобы найти URL-адрес, по которому пользователь перешел в данный момент, и поместить логику внутри.
  • Наконец вы напишете свою логику в соответствии с value.url

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

Мой app.component.html выглядит так

Здесь вы можете видеть, что я показываю заголовок, только если свойство «showHeader» равно true

Мой app.component.ts выглядит так

Теперь, если я нажму кнопку "Отправить", он перенаправится на "панель управления"
и покажет компонент панели управления.

*Поэтому компонент заголовка становится видимым *

Рабочий репозиторий для справки
https://stackblitz.com/edit/angular-ivy-atods7?file=src/app/app.component.ts

Ссылка на Github
https://github.com/deepa314/angular-ivy-atods7.git

Надеюсь, это поможет вам, ребята :)
Если вам понравилось, поставьте лайк, поделитесь и подпишитесь