angular - Router angular2 no funciona con el mismo componente pero diferente id

Todavía estoy usando el enrutador alpha8. Tengo 3 rutas principales:

export const appRoutes: RouterConfig = [
    { path: '', component: LandingComponent },
    { path: 'blog', component: BlogComponent },
    { path: 'posts/:id', component: PostComponent },
    { path: 'posts',  redirectTo: 'blog' },
    { path: '**', redirectTo: ''}  
];

Así que tengo un componente con publicaciones destacadas y los enlaces funcionan bastante bien desde el BlogComponent, pero cuando este componente está en PostComponent, solo cambia la dirección URL. Así es como se ven los enlaces en ese componente

<a [routerLink]="['/posts/'+post.id]">...</a>

Entonces, cuando estamos en localhost:5000/blog, se redirige correctamente a localhost:5000/posts/19 por ejemplo. Pero desde localhost:5000/posts/19 no va a localhost:5000/posts/20. Solo cambia la URL, constructor, ngOnInit no se ejecutan. ¿Cómo puedo resolver este problema?

Respuesta #1

Tienes que agregar un "subscriber" dentro de ngOnInit para capturar los cambios en los parámetros de la URL. Además, deberías cancelar la suscripción dentro de ngOnDestroy (implementa esto en tu clase de componente, como lo haces con OnInit), para evitar fugas de memoria.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'your-posts-component'
})
export class PostsComponent implements OnInit, OnDestroy {

private sub: any;

constructor(private route: ActivatedRoute ) {}

// add a subscriber to watch for changes in the url
ngOnInit() {
    this.sub = this.route.params
       .subscribe(params => {
          // get id from params
          let id = +params['id'];

          // do whatever you want with id here

        });
      }
}

// unsubscribe to avoid memory leaks
ngOnDestroy() {
    this.sub.unsubscribe();
}

Así es como se detectan los cambios en los parámetros de la URL cuando un componente ha sido revisitado sin pasar por otro componente.

Respuesta #2

Establece la opción onSameUrlNavigation en reload:

  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],