Question

使用Angular 7.x，我想根据子路由以及是否激活它们来相应地更改父报头组件。所以就我而言

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

所以我的路由非常简单，app-routing.module仅包含带有loadChildren的功能模块的加载，在这里没什么花哨的。

然后，此功能模块包含子组件的路由。有一个parentComponent，我们称其为ParentComponent，其中包含路由器出口。还有一些我想根据孩子而更改的标题。

我有两个子组件：create和':id'（详细信息页面）。当我触发这些路由时，我需要父组件仅相应地更改其文本内容。因此，例如，当触发创建页面时，我想添加标题：“ Create new item”，对于：id页面，我想显示“ Detail page”。

现在，我已经确定我需要订阅路由器事件或在activatedRoute（或快照）上。我在这里很茫然，所以我真的不知道该怎么办。

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

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的输出，请注意在我的实际应用程序中，父级被命名为“时间表”。

也许还有其他解决方案吗？也许是一项服务，但是所有信息基本上已经在路由中，因此我试图找出这是否是解决问题的方法。

Answer 1

您可以在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);
}

Answer 2

您可以像这样在路线中尝试为孩子设置标题。

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

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

并在子组件中获取标题，然后使用服务将该标题设置为标题。

如何根据路由

2 个答案: