1.路由配置
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {ConfirmOrderComponent} from "./confirm-order/confirm-order.component";
const routes: Routes = [
{
path: '',
redirectTo: 'confirm-order',
pathMatch: 'full',
},
{
path: 'confirm-order',
component: ConfirmOrderComponent,
data: {title: '确认订单'}
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
2.AppComponent订阅路由变化,动态设置页面标题
import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, NavigationEnd} from "@angular/router";
import {Title} from "@angular/platform-browser";
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private titleService: Title
) {}
ngOnInit(): void {
this.router.events
.filter(e => e instanceof NavigationEnd)
.map(() => this.activatedRoute)
.map(r => {
while (r.firstChild) r = r.firstChild;
return r;
})
.filter(r => r.outlet === 'primary')
.mergeMap(r => r.data)
.subscribe(e => this.titleService.setTitle(e['title']));
}
}