Как динамически установить заголовок заголовка как текущее имя пути к компоненту в Angular

Шаг 1:

Создайте угловой проект с трассировкой.

ng new header-title - — routing

Шаг 2:

Создайте компоненты. Здесь я создаю минимум файлов компонентов со встроенными стилями и шаблонами.

ng g c components/home — skip-tests --inline-style - — inline-template --flat

ng g c components/dashboard — skip-tests --inline-style - — inline-template --flat

ng g c components/profile --skip-tests --inline-style - — inline-template --flat

ng g c components/edit-profile —-skip-tests --inline-style - — inline-template --flat

ng g c components/select-products — skip-tests --inline-style - — inline-template --flat

Шаг 3

Добавьте компоненты в app-routing.module.ts

Шаг 4

Создайте компонент заголовка.

ng g c components/header --skip-tests --inline-style --inline-template --flat

Добавьте компонент заголовка над <router-outlet>. Теперь он появляется на каждом составляющем маршруте.

<app-header> </app-header>
<router-outlet> </router-outlet>

Создайте элемент header и стилизуйте его.

На следующем шаге мы назначим переменную title.

Шаг 5

Добавьте кнопки в app.component.ts для навигации по каждому маршруту.

Теперь добавьте событие (activate) в router-outlet, которое генерируется каждый раз, когда маршрутизатор переходит на новый путь и создается экземпляр компонента,

<router-outlet (activate)=”setHeader()”></router-outlet>

В setHeader() мы прочитаем текущий путь к компоненту из маршрутизатора.

Используйте decodeURIComponent , если в вашем пути есть пробелы или специальные символы.

ШАГ 6

Передайте title в шапку component.

<app-header [title]=”title”></app-header>

В header.component.ts добавьте @Input , чтобы принять это значение.

@Input() title: string = '';

Мы уже привязываем title к header. Поэтому при изменении маршрута обновляется значение title.

Окончательный код должен выглядеть так.

Заключение

  • Если у вас несколько компонентов и вы хотите установить имя компонента в качестве заголовка, используйте событие (activate) на router-outlet, чтобы обнаружить изменение компонента. Получить текущий путь от Router.
  • Используйте headercomponent над router-outlet, чтобы он отображался на каждой странице компонента.
  • Передайте путь, полученный из Router , в header component.

Вот рабочий Стакблитц.

Это все! Надеюсь, эта статья была полезной.

Больше контента на plainenglish.io