Angular 7 Router: используйте заголовок по умолчанию, если он не указан в данных маршрута - PullRequest
Новая
       19

Angular 7 Router: используйте заголовок по умолчанию, если он не указан в данных маршрута

0 голосов
/ 17 мая 2019

После нескольких статей и SO сообщений я настроил свое приложение так, чтобы заголовок страницы отображался как параметр данных маршрутизатора «title»: 

const routes: Routes = [
  {
    path: '',
    component: BadgesComponent,
    data: {
      title: 'Design System - Badges'
    }
  }
];

Однако некоторые из моих маршрутов могут не иметь этогодобавлен параметр;в этом случае я хочу отобразить заглавный заголовок, например, «Система проектирования».Код, который я собрал (ниже), ищет элемент данных, но я не знаю, как добавить запасной вариант к простой строке, если элемент данных отсутствует.

Стоит отметить, что index.htmlимеет title значения по умолчанию, которое я хочу, которое отображалось до того, как я добавил этот код.После того, как я добавил код, он перезаписывается - и http://localhost:8082/#/badges отображается как заголовок страницы (например) 

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser';

import { map, filter, mergeMap } from 'rxjs/operators';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {

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

  ngOnInit() {
    this.router.events
      .pipe(
        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 => this.titleService.setTitle(event['title']));
  }
}

1 Ответ

1 голос
/ 21 мая 2019

Почему бы не сделать это внутри кода подписки, который у вас уже есть? 

.subscribe(event => this.titleService.setTitle(event['title'] || 'Design System'));
...