Лучший способ скрыть глобальный заголовок в приложении Angular

Question

Так что я хотел бы реализовать глобальный заголовок в приложении, заголовок приложения был бы поверх <router-outlet>, на некоторых страницах я хотел бы изменить внешний вид заголовка или скрыть его,Я видел реализации этого в прошлом, когда у вас есть HeaderService, а затем Header подписывается на одно или несколько значений этой службы, поэтому другие компоненты могут вызывать службу и, возможно, устанавливать флаги, чтобы скрыть заголовок, а что нет.

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

Answer 1

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

[
  {
    path: '',
    component: LayoutWithHeaderComponent
    children: [ <the routes with a header here ]
  },
  {
    path: '',
    component: LayoutWithoutHeaderComponent
    children: [ <the routes without a header here ]
  }
]

Конечно, оба компонента макета будут иметь <router-outlet> в своем шаблоне, куда будет добавлен дочерний компонент маршрута.