How to set headers for different routes in Angular 2?

Question

I want to set up a static header (i.e. <title>) for every single route in an Angular app. If the route does not contain a heading, it should have a default heading. And each title should have a common suffix.

I could just use title.setTitle()in every component of the page, but then the title will not change to the default value if the component does not have the specified title. How to add a common suffix is ​​another problem in this scenario.

Or I could use router.event.subscribe()to manage my headers in one place, but I don’t know how to split routes or get any data on the current route.

What is the correct and clean way to manage captions in an Angular app?

Answer 1

You can create a service designed to update the title in the title component. Just add the service to your header component and subscribe to the highlighted BehaviorSubject. You can then enter this service into any component that you have and use the method setTitlefrom this component that will update the header in the header component. Check out the following code.

The code:

//headerTitle.service.ts
@Injectable()
export class headerTitleService {
  title = new BehaviorSubject('Initial Title');

  setTitle(title: string) {
    this.title.next(title);
  }
}

//header.component.ts
title = '';

constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.title.subscribe(updatedTitle => {
    this.title = updatedTitle;
  });
}

//header.component.html
<h1>{{title}} - Suffix title</h1>

//about.component.ts
constructor(private headerTitleService: HeaderTitleService) {}

ngOnInit() {
  this.headerTitleService.setTitle('About');
}

Answer 2

One way to do this, as you mentioned in your question, is to sign up for router.event. Suppose you have a top-level component where you want to display the title. You need to subscribe to router events as follows:

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

...

title: string;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
  ) {}

ngOnInit() {
    this.router.events
      .filter(event => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map(route => {
        while (route.firstChild) {
          route = route.firstChild;
        }
        return route;
      })
      .filter(route => route.outlet === 'primary')
      .mergeMap(route => route.data)
      .subscribe((event: NavigationEnd) => {
        this.title = event['title'] || 'Default Title';
      });
}

, , : NavigationEnd . , data param, .

:

  {
    path: 'home',
    component: HomeComponent,
    data: { title: 'Home Title' },
  }

, . Observables, , - , .

document.title

, document.title Angular Title, :

import { Title } from '@angular/platform-browser';
...
constructor(private titleService: Title) {}
...
this.titleService.setTitle('Home Title');