Question

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

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

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

我的"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

一种方法是使用*ngIf（或[hidden]，如果您想一次将所有内容加载到DOM中）。并且要捕获当前路由，请注入路由器模块：

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'
  }
}

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

你应该使用路由器数据

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”属性

更改Angular中路由事件的数据

3 个答案: