В маршрутизации Angular2 URL-адрес изменился, но контент не обновляется - PullRequest
Новая
       8

В маршрутизации Angular2 URL-адрес изменился, но контент не обновляется

0 голосов
/ 23 мая 2018

Я новичок в Angular2.Когда я изучаю службу маршрутизации angular2 из https://angular.io/tutorial/toh-pt5., я хочу, чтобы 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, но содержимое в не обновляется.Может кто-нибудь, пожалуйста, помогите мне с этим?

Ответы [ 2 ]

0 голосов
/ 23 мая 2018

если ниже не проблема, то это должно быть проблема, что вы просто изменяете параметр 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>

вы загружаете app-heroes компонент вне router-outlet, он должен быть загружен в router-outlet, поэтому вы должнысделай это 

<!-- <app-heroes></app-heroes> remove this-->
<router-outlet></router-outlet>
0 голосов
/ 23 мая 2018

Для изменения маршрута с динамическим значением вам нужно установить routerLink следующим образом: 

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