在 Angular2 路由中，URL 发生了变化，但内容没有更新答案

【问题标题】：In Angular2 routing, the URL changed but the content doesn't update在 Angular2 路由中，URL 发生了变化，但内容没有更新
【发布时间】：2018-05-23 05:22:15
【问题描述】：

我是 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 页面上的英雄时，它可以指向正确的 URL 并显示正确的英雄详细信息。

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

【问题讨论】：

能否请您在 stackbiz 分享代码...这可能有助于解决它
嗨添加了我的答案，你可以试试
这对你有用吗？？你能告诉我吗
更新了我的答案，试一试应该可以工作

标签： javascript angular angular2-routing

【解决方案1】：

如果下面没有问题，那么应该是您只是更改了参数 url，这就是它没有更新的原因

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

上面的代码监控参数值的变化并根据它更新你的组件。

因为这个html有问题

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

你在router-outlet之外加载app-heroes组件，它应该在router-outlet下加载，所以你应该这样做

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

【讨论】：

这不是我要问的。我保留应用英雄，因为我总是希望显示英雄列表。问题是router-outlet里面的内容没有改变
@LinLi - 很难理解为什么它没有看到你的代码就没有改变，你能在哪里分享吗，

【解决方案2】：

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

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

【讨论】：