javascript - 在 Angular 中更改路由事件的数据

Question

如何在 Angular 中的路由事件中相对于其他组件更改一个组件中的数据？

例如如果我有三个组件:"nav.component"、"about.component" 和 "service.component"。

因此，当我在我的应用程序中的 about 和 service 页面之间切换时，我想在 "nav.component" 中显示不同的文本。

我的 “app.router.ts” 文件:

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ServiceComponent } from './service/service.component';

export const router: Routes = [
    { path: '', redirectTo: 'about', pathMatch: 'full' },
    { path: 'about', component: AboutComponent },
    { path: 'service', component: ServiceComponent }
];

export const routes: ModuleWithProviders = RouterModule.forRoot(router);

我不想在这些页面之间切换时在我的导航栏中只显示页面名称文本，这将是每个组件的自定义文本。此外，我想将此数据/文本直接存储在 "about.component.ts" 和 "service.component.ts" 中，但不存储在 "app .router.ts" 由于可维护性和可扩展性。

这可能吗？

U.P.D.

这是我的“app.component.html”文件:

<div class="container">

  <!-- Nav Bar (text changes here) -->
  <app-nav></app-nav>

  <!-- Pages (components which are included in app.router.ts) -->
  <router-outlet></router-outlet>

</div>

例如这是 “about.component.ts” 文件:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-about',
  templateUrl: './about.component.html',
  styleUrls: ['./about.component.scss']
})
export class AboutComponent implements OnInit {
  const text_for_nav_bar = "This is my new About page."; // <-- text that should be displayed in nav component for this page on router event.

  constructor() { }

  ngOnInit() {
  }

}

Answer 1

使用下面的代码，您将能够订阅路由器更改事件。您需要在导航栏上添加此代码。

导入路由器和导航开始

import { Router, ActivatedRoute, NavigationStart } from '@angular/router';
import "rxjs/add/operator/filter";
import "rxjs/add/operator/pairwise";

在constrictor中添加以下代码。

this.router.events
  .filter(event => event instanceof NavigationStart)
  .pairwise()
  .subscribe((value: [NavigationStart, NavigationStart]) => {
     let nextUrl = value[1].url;
     if (nextUrl == '/about') {
         // your code here for next url
     }
  },
    (err) => {

    },
    () => { });
}

});