javascript - Angular2路由中，URL改变了但内容没有更新

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

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

Answer 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>