angular - Router angular2 không hoạt động với cùng một component nhưng id khác nhau

Tôi vẫn đang sử dụng bộ định tuyến alpha8. Tôi có 3 tuyến chính:

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

Vậy tôi có một component với các bài viết nổi bật và các liên kết ở đó hoạt động khá tốt từ BlogComponent, nhưng khi component này ở trong PostComponent, id chỉ thay đổi địa chỉ URL. Đây là cách các liên kết trông như thế nào trong component đó

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

Vì vậy, khi chúng ta ở localhost:5000/blog thì nó điều hướng bình thường đến localhost:5000/posts/19, ví dụ. Nhưng từ localhost:5000/posts/19 thì nó không đi tới localhost:5000/posts/20. Nó chỉ thay đổi URL, constructor, ngOnInit không được thực thi. Làm sao tôi có thể giải quyết vấn đề này?

Câu trả lời #1

Bạn phải thêm một "subscriber" bên trong ngOnInit để bắt các thay đổi trong tham số URL. Ngoài ra, bạn nên hủy đăng ký bên trong ngOnDestroy (thực hiện điều này với lớp component của bạn, giống như bạn thực hiện với OnInit), để tránh rò rỉ bộ nhớ.

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();
}

Đây là cách phát hiện các thay đổi trên tham số URL khi một thành phần được truy cập lại mà không đi qua một thành phần khác.

Câu trả lời #2

Đặt tùy chọn onSameUrlNavigation thành reload:

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