Как изменить заголовок родительского компонента в соответствии с маршрутом - PullRequest
Новая
       1

Как изменить заголовок родительского компонента в соответствии с маршрутом

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

Используя Angular 7.x, я хочу изменить свой родительский компонент заголовка в соответствии с дочерними маршрутами и, если они активированы или нет.Так что в моем случае 

AppComponent   
     Feature Module <= detect changes here    
          Child Components of feature module

Так что моя маршрутизация очень проста, app-routing.module просто содержит загрузку функционального модуля с loadChildren, здесь ничего особенного.

Тогда эта функцияМодуль содержит маршруты для дочерних компонентов.Существует один parentComponent, мы называем его ParentComponent, который содержит выход маршрутизатора.Есть также некоторые заголовки, которые я хочу изменить в соответствии с дочерними элементами.

ТАК у меня есть два дочерних компонента: create и ':id' (страница сведений).Когда я запускаю эти маршруты, мне нужно, чтобы родительский компонент просто соответственно изменил их текстовое содержимое.Так, например, когда запускается страница создания, я хочу добавить заголовок: «Создать новый элемент», а для страницы: id я хочу показать «Страница сведений».

Теперь я понял, чтонужно подписаться на события роутера или на activRoute (или снимок).Я в растерянности, поэтому не знаю, что здесь делать.

Мой родительский компонент теперь выглядит следующим образом: 

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html',
})
export class ParentComponent implements OnInit {
  title = 'Parent Title';
  // Check if it is possible to change the title according to the route
  subtitle = 'Parent subtitle';

  constructor(private readonly router: Router, private readonly route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.url.subscribe(data => {
      if (this.route.snapshot.firstChild) {
        console.log('yes', this.route.snapshot.firstChild);
        // Change header with a if/else or switch case here
      } else {
        // Display standard text 
        console.log('no');
      }
    });
  }
}

это выходные данные console.logs, обратите внимание, что в моем реальном приложении родительский элемент называется 'timesheets'.

enter image description here

Возможно, есть другое решение для этого?Может быть, услуга, но вся информация в основном уже находится в пути, поэтому я пытаюсь выяснить, так ли это решить мою проблему.

Ответы [ 2 ]

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

Вы можете прослушивать NavigationEnd события в ParentComponent или (я думаю), еще лучше, вы можете использовать службу заголовков.

Решение 1:

В ParentComponent

import {NavigationEnd, Router} from '@angular/router';
import {filter} from 'rxjs/operators';
...



constructor(private router: Router, private readonly route: ActivatedRoute) {
    this.subscribeRouterEvents();

}

subscribeRouterEvents = () => {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd)
    ).subscribe(() => {

       this.title = this.route.snapshot.data['title'];
       // Assuming your route is like:
       // {path: 'path', component: MyComponent, data: { title: 'Page Title'}}
    });

Решение 2:

Использование TitleService.Создайте сервис, содержащий заголовок страницы, подпишитесь на заголовок с ParentComponent и отправьте новый заголовок на сервис с ChildComponent.

TitleService 

@Injectable({
  providedIn: 'root'
})
export class TitleService {

  private defaultTitle = 'Page Title';
  private titleSubject: BehaviorSubject<string> = new BehaviorSubject(this.defaultTitle);
  public title: Observable<string>;

  constructor(private titleService: Title) {
    this.title = this.titleSubject.asObservable();
  }

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

ParentComponent 

pageTitle = 'Page Title';
constructor(private titleService: TitleService) {}

ngOnInit(){
  this.titleService.title.subscribe(value => this.pageTitle = value);
}

ChildComponent 

pageTitle = 'Child Component Title';
constructor(private titleService: TitleService) {}

ngOnInit(){
  this.titleService.setTitle(this.pageTitle);
}
0 голосов
/ 18 марта 2019

Вы можете попытаться установить заголовок для дочернего элемента как часть маршрута следующим образом. 

const routes: Routes =[
  {
    path: 'create',
    component: SomeComponent,
    data : {header_title : 'some title'}
  },
];

ngOnInit() {
   this.title = this.route.data.subscribe(x => console.log(x));
}

и получить заголовок в дочернем компоненте и установить его в качестве заголовка заголовка с помощью службы.

...