Используйте переменную `title` из определенного места в гораздо более высокий шаблон

Question

У меня есть шаблон, который хорошо работает (пока) для моего приложения.Есть боковая панель, верхний и нижний колонтитулы, каждый из которых находится в своем собственном компоненте, и все строительные блоки на месте.

Проблема в том, что я хочу использовать определенную информацию, относящуюся к используемому представлению- Например, в модуле запросов есть новый компонент запроса, и я хочу показать «Новый запрос» в качестве заголовка в компоненте заголовка.

Я начал использовать службу, но не уверен, как обновитьэто, учитывая, что я пытался это сделать, но имел ошибку при использовании ngOnInit (который вызывается один раз, поэтому в заголовке нет обновления / отслеживания).

Я попытался передать произвольные данные вмаршруты, с переменной data.Проблема, которую я обнаружил, состоит в том, что наблюдаемая ActivatedRoute data дает данные для родителя, а не для потомков.Я мог бы использовать firstChild, но тогда заголовок не обновляется при изменении маршрута.

Я изучал документацию по использованию подхода Input, но поскольку шаблоны используют router-outlet, он не 'Кажется, что он работает (я не смог настроить Angular таким образом, и все же я не знаю, как правильно его обновить).

Есть ли правильный способ сделать это?У меня есть разумный подход?Может быть, я фокусируюсь с плохой точки зрения, но я не вижу, как это сделать простым способом.

---

Я чувствовал, что размещение кода может привести к путанице, но, возможно, это дает некоторые идеина то, что я хочу / что я пытался.Возможно, следующий код - полная фигня, и я ошибся.Может быть, это можно спасти.Обратите внимание, что использование службы или использование данных маршрута - это разные (исключительные?) Подходы, и я застрял с обоими.

// header.component.ts

@Component({
(...)
export class HeaderComponent implements OnInit {
  ngOnInit() {
    // Conceptually, using Tried using a service here
    this.title = this.extraRouteInfoService.getTitle();
    // alternatively, something along
    this.title = this.route.data.pipe(map(data => data.title));
    // or with some conceptual method that doesn't exist
    this.title = this.route.getDataForLastChildCurrentRoute(magic);
  }
}

<!-- header.component.html -->
<div>
...
<h1>{{ title | async }}</h1>
...
</div>

<!-- home.component.html -->
<div>
<app-layout-header></app-layout-header>
  <main class="content">
    <router-outlet></router-outlet>
  </main>
</div>

// home-routing.module.ts
const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    data: {
      title: 'Home',
    },
    children: [
      {
        path: 'enquiries',
        loadChildren: '../enquiries/enquiries.module#EnquiriesModule'
      }
    ]
  }
];
//(...)

// enquiries-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: EnquiryListComponent,
    data: {
      title: 'All enquiries'
    }
  },
  {
    path: 'new',
    component: EnquiryNewComponent,
    data: {
      title: 'New enquiry'
    }
  }
];
//(...)