Заголовки страниц с событием маршрутизатора возвращают тот же заголовок в Angular2 - PullRequest
Новая
       24

Заголовки страниц с событием маршрутизатора возвращают тот же заголовок в Angular2

1 голос
/ 14 марта 2019

У меня есть следующие маршруты и смена заголовков с использованием событий маршрутизатора с AppComponent, как показано ниже. AppRoutingModule 

  { path: 'Home', component: ErrorComponent, data: {  title: 'Home Page' } },
  { path: 'Login', component: LoginComponent, data: {  title: 'Login' } },
  { path: 'ForgotPassword', component: ForgotComponent, data: {  title: 'Forgot Password' } },

  { path: 'Register', component: RegisterComponent, data: {  title: 'New Registration' } },
  { path: 'Register/:id', component: RegisterComponent, data: {  title: 'Update Profile' } }

Здесь, если я перехожу между Home, Login, ForgotPassword, все работает как положено, но при переходе к регистрации один раз, затем переход к любой другой странице, которая дает мне название страницы регистрации для всех дальнейших переходов.

AppComponent 

constructor(private router: Router,
    private activatedRoute: ActivatedRoute,
    private titleService: Title) {
    this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      map(() => this.activatedRoute),
      map((route: any) => {
        while (route.firstChild) route = route.firstChild;
        return route;
      }),
      filter((route) => route.outlet === 'primary'),
      mergeMap((route: any) => route.data)).subscribe((event) => {
        this.titleService.setTitle(event['title']);
        console.log('Page Title', event['title']);
      });
  }

Что мне здесь не хватает? Я использую Angular 7.

1 Ответ

0 голосов
/ 14 марта 2019

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

для меня это работает нормально

сначала создайте новый .ts file с именем

page-title.ts

в папке constants из root folder (или где угодно) 

export const DETAILS = {
    HOME_PAGE: {
        title: 'Millions of reviews analyzed & ranked',
        meta: 'cc analyzes all reviews from all review sites and shows you what other consumers find important.',
    },
    SEARCH_REVIEW: {
        title: 'Search Results -test.com',
        meta: '',
    },
    TERMS: {
        title: 'Terms and Conditions',
        meta: '',
    },
    BLOGS: {
        title: 'The Consumerchoice Blog',
        meta: '',
    },
    BLOG_DETAILS: {
        title: 'Blog post title',
        meta: '',
    },
    PRESSES: {
        title: 'Consumerchoice in the Press',
        meta: '',
    },
    PRESS_DETAILS: {
        title: 'Press post title test',
        meta: '',
    },
    ABOUT: {
        title: 'Learn about Consumerchoice and our team',
        meta: '',
    },
    CONTACT: {
        title: 'Contact test.com',
        meta: '',
    },
    FAQS: {
        title: 'Questions and Answers',
        meta: '',
    },
    CATEGORY: {
        title: 'All test.com Categories',
        meta: '',
    },
    SERVICE_DETAILS: {
        title: 'Home | Service Details',
        meta: '',
    }
}

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

, тогда внутри компонента вашего конкретного маршрута простоиспользуйте метод seTitle для установки заголовка

здесь, например, я хочу установить заголовок для Terms Page, а затем добавить этот код в конструктор этого компонента

terms.component.ts 

import { DETAILS } from '../../constants/page-details';


constructor(public titleService: Title,) {

   this.titleService.setTitle(DETAILS.TERMS.title);

}

дайте мне знать, если это вам поможет !!

ИЛИ просто попробуйте обновить ваш конструктор app.component.ts следующим кодом 

constructor(
    public router: Router,
    public activatedRoute: ActivatedRoute,
    public titleService: Title
  ) {
    router.events
      .filter(e => e instanceof NavigationEnd)
      .subscribe((event) => {
        console.log('title from route data :', 
         activatedRoute.root.firstChild.snapshot.data['title']);
        this.title = 
         activatedRoute.root.firstChild.snapshot.data['title'];
        this.titleService.setTitle(this.title);
      })
     }
...