Angular2.x_根据路由变化，更改title值

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { AuthGuardService } from './core/services/auth-guard.service';

const routes: Routes = [
  { path: '', redirectTo: 'productionOrder', pathMatch: 'full' },
  {
    path: 'productionOrder', loadChildren: './+productionOrder/productionOrder.module#ProductionOrderModule', canActivate: [AuthGuardService], data: { title: 'PRODUCTION' }
  },
  {
    path: 'administration', loadChildren: './+administration/administration.module#AdministrationModule', canActivate: [AuthGuardService], data: { title: 'ADMINISTRATION' }
  },
  {
    path: 'pickDeliveryOrders', loadChildren: './+pickDeliveryOrders/pickDeliveryOrders.module#PickDeliveryOrdersModule', canActivate: [AuthGuardService], data: { title: 'PICK / PACK / STAGE' }
  },
  {
    path: 'loadTruck', loadChildren: './loadtruck/load-truck.module#LoadTruckModule', canActivate: [AuthGuardService], data: { title: 'LOAD TRUCK' }
  },
  {
    path: 'joinDeliveryPick', loadChildren: './+pickDeliveryOrders/pickDeliveryOrders.module#PickDeliveryOrdersModule', canActivate: [AuthGuardService], data: { title: 'JOIN DELIVERY PICK' }
  },
  {
    path: 'manageHandlingUnits', loadChildren: './+manageHandingUnits/manageHandingUnits.module#ManageHandlingUnitsModule', canActivate: [AuthGuardService], data: { title: 'HU MANAGEMENT' }
  },
  {
    path: 'loadOrders', loadChildren: './+loadOrders/loadOrders.module#LoadOrdersModule', canActivate: [AuthGuardService], data: { title: 'DISPATCH PLANNING' }
  },
  {
    path: 'profile', loadChildren: './+profile/profile.module#ProfileModule', canActivate: [AuthGuardService], data: { title: 'PROFILE' }
  },
  {
    // tslint:disable-next-line:max-line-length
    path: 'deliveryProgressDashboard', loadChildren: './+deliveryProgressDashboard/delivery-progress-dashboard.module#DeliveryProgressDashboardModule', canActivate: [AuthGuardService], data: { title: 'DELIVERY PROGRESS DASHBOARD' }
  },
  {
    path: 'exception', loadChildren: './+exceptions/exception.module#ExceptionsModule', canActivate: [AuthGuardService], data: { title: 'EXCEPTION MANAGEMENT' }
  },
  {
    path: 'putaway', loadChildren: './+putaway/put-away.module#PutawayModule', canActivate: [AuthGuardService], data: { title: 'PUT AWAY' }
  },
  {
    path: 'login', loadChildren: './+login/login.module#LoginModule', data: { title: 'LOGIN' }
  },
  {
    path: 'register', loadChildren: './+register/register.module#RegisterModule'
  },
  {
    path: 'activeIDOCReview', loadChildren: './activeIDocReview/activeIDOCReview.module#ActiveIDocReviewModule', data: { title: 'ACTIVE IDOC REVIEW' }
  },
  {
    path: 'operatorManagement', loadChildren: './operatorManagement/operatorManagement.module#OperatorManagementModule', data: { title: 'OPERATOR DASHBOARD' }
  }

];

export const routing = RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules });

定义路由的时候加了个data

然后在公用页面，路由事件

public ngOnInit(): void {
    this.authState$ = this.store.select(state => state.auth);


    this.router.events.subscribe((event: NavigationEnd) => {
      if (this.route.firstChild) {

        this.route.firstChild.data.subscribe(data => {
          if (data) {
            this.title = data.title || '';
            this.show = data.title != 'LOGIN';
            let url = window.location.href;
            if (url.indexOf('smartLogixSimulator') > -1 || url.indexOf('completionOrder') > -1 || url.indexOf('resetdelivery') > -1) {
              this.title = 'TEST TOOLS';
            }

然后就是个双向绑定

<header>
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" *ngIf="show">
        <a class="navbar-brand">
            <img style="width: 189px" src="/assets/logo.png" />
        </a>
        <div class="collapse navbar-collapse" id="navbarNav" [class.show]="!isCollapsed">
            <div class="text-muted titleText">
                <h4 class="text-center h4Title">{{title}}</h4>
            </div>
            <div class="row pull-right navRight">