PROSAGA码农传奇-Angular-如何根据路由更改父组件的标头

<div class =“post-text”itemprop =“text”>
  
    你可以听
     <code>
 NavigationEnd
 </code>
     中的事件
     <code>
 ParentComponent
 </code>
     或者（我认为）你可以使用标题服务。
  
  <HR />
  
    解决方案1：
  
  
    在
     <code>
 ParentComponent
 </code>
  
   <pre>
 <code>
 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'}}
    });

</code>
 </pre>
  <HR />
  
    解决方案2：
  
  
    运用
     <code>
 TitleService
 </code>
    。创建一个包含页面标题的服务，订阅标题
     <code>
 ParentComponent
 </code>
     并从中发送新的标题
     <code>
 ChildComponent
 </code>
    。
  
  
    的
      TitleService
    </强>
  
   <pre>
 <code>
 @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);
  }
}

</code>
 </pre>
  
    的
      为父级
    </强>
  
   <pre>
 <code>
 pageTitle = 'Page Title';
constructor(private titleService: TitleService) {}

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

</code>
 </pre>
  
    的
      ChildComponent
    </强>
  
   <pre>
 <code>
 pageTitle = 'Child Component Title';
constructor(private titleService: TitleService) {}

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

</code>
 </pre>
</DIV>