如何根据路由更改 parent 组件上的 header

Question

使用 Angular 7.x，我想根据 child 路由更改我的 parent header 组件以及它们是否被激活.所以就我而言

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

所以我的路由很简单，app-routing.module 只是包含用loadChildren 加载功能模块，这里没什么特别的。

然后此功能模块包含 child 组件的路由。有一个 parent 组件，我们称之为 ParentComponent，其中包含 router-outlet。还有一些 headers 我想相应地更改为 childs.

所以我有两个 child 组件：create 和 ':id'（详细信息页面）。当我触发这些路由时，我需要 parent 组件来相应地更改它们的文本内容。因此，例如，当创建页面被触发时，我想添加 header: "Create new item"，对于 :id 页面，我想显示 "Detail page".

现在，我发现我需要订阅路由器事件或订阅 activatedRoute（或快照）。我在这里不知所措，所以我真的不知道该怎么做。

我的 parent 组件现在看起来像这样：

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 的输出，请注意在我的实际应用程序中 parent 被命名为 'timesheets'。

是否有其他解决方案？也许是一项服务，但所有信息基本上都已经在路线中了，所以我想弄清楚这是否是解决我的问题的方法。

Answer 1

您可以在 ParentComponent 中收听 NavigationEnd 事件，或者（我认为）更好的是您可以使用标题服务。

解决方案 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);
  }
}

父组件

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

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

子组件

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

ngOnInit(){
  this.titleService.setTitle(this.pageTitle);
}

Answer 2

您可以像这样尝试将 child 的标题设置为路线的一部分。

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

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

并在 child 组件中获取标题并使用服务将其设置为 header 标题。

如何根据路由更改 parent 组件上的 header

How to change the header on parent component according to route

html

javascript

angular-routing

angular