Question

我是Angular2的初学者。当我从https://angular.io/tutorial/toh-pt5学习angular2路由服务时。我想让herocomponent始终显示，所以我在app.component.html中这样：

<h1>{{title}}</h1>
<nav>
  <a routerLink="/dashboard">Dashboard</a>
  <a routerLink="/heroes">Heroes</a>
  <a routerLink="/dummy">Dummy</a>
</nav>
<app-heroes></app-heroes>
<router-outlet></router-outlet>
<app-messages></app-messages>

这是app-routing.module.ts：

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

import { DashboardComponent }   from './dashboard/dashboard.component';
import { HeroesComponent }      from './heroes/heroes.component';
import { HeroDetailComponent }  from './hero-detail/hero-detail.component';
import {DummyComponentComponent} from './dummy-component/dummy-component.component';
const routes: Routes = [
  { path: '', redirectTo: '/', pathMatch: 'full' },
  { path: 'dashboard', component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes', component: HeroesComponent },
  {path: 'dummy',component:DummyComponentComponent}
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

奇怪的是，当我点击/dashboard或/heroes页面上的英雄时，它可以指向正确的网址并显示正确的英雄明细。

然而，当我在/detail/{{hero.id}}上并单击英雄组件上的英雄时，它可以重定向URL，但内容不会更新。有人可以帮我这个吗？

Answer 1

如果下面没有问题那么应该是你只是更改参数网址的问题，这是因为它没有更新

//put this code in your hero.component.ts file 
ngOnInit() {
this.route.params.subscribe((params) => {
   this.id = +params['id'];
   this.loadComponentAgain();
 });
}

以上代码监视param值的变化并根据它更新组件。

因为这个html存在问题

<app-heroes></app-heroes>
<router-outlet></router-outlet>

您正在加载app-heroes组件router-outlet，它应该加载到router-outlet下，所以您应该这样做

<!-- <app-heroes></app-heroes> remove this-->
<router-outlet></router-outlet>

Answer 2

要更改具有动态值的路线，您需要像这样设置routerLink

[routerLink]="['/detail',hero.id]"

在Angular2路由中，URL已更改但内容未更新

2 个答案: