在 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

你应该使用路由器数据

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

在 app.component.html 中

<div class="container">

    <app-nav text="outlet.activatedRouteData.navigationText"></app-nav>

    <router-outlet #outlet="outlet"></router-outlet>

</div>

当然你需要在nav.component.ts中添加一个“@Input text: string”属性

Answer 2

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

导入路由器和导航开始

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) => {

    },
    () => { });
}

});

Answer 3

一种方法是使用*ngIf（或[hidden]，如果您想一次将所有内容加载到DOM）。为了捕捉当前路由，注入 Router 模块：

class NavComponent {
    constructor(private router: Router){

    }
}

在 nav.component.html 中：

<div *ngIf="router.url === '/some/route'">
 text for this route
</div>
<div *ngIf="router.url === '/other/route'">
 text for other route
</div>

在 component.ts 中做同样的事情，可能是：

nav.component.html:

<h1>{{yourText}}</h1>

component.ts:

ngOnInit() {
  if(this.router.url == '/some/route') {
    yourText = 'Text'
  } elseif(this.router.url == '/other/route') {
    yourText = 'Other text'
  }
}