Angular 5 RouterLink不能使用相同的路徑但不同的參數

Question

我有一個帶元素的錨元素，它帶有參數。 這些參數是導航到正確頁面所必需的。 現在，當我從不同的路徑導航頁面時，路由器鏈接正常工作。 例如，我的路由器模塊如下所示：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { MoviesComponent } from './movies/movies.component';
import { MovieReviewComponent } from './movie-review/movie-review.component';
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './admin/admin.component';
const routes: Routes = [
  { path: '', component: MoviesComponent },
  { path: 'movies', component: MoviesComponent },
  { path: 'movies/:movieTitle/:year', component: MovieReviewComponent },
  { path: 'login', component: LoginComponent },
  { path: 'admin', component: AdminComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我在路由器插座外面有一個導航組件，如下所示：

<app-navigation></app-navigation>
<app-messages></app-messages>
<div id="main-layout" class="row p-3">
  <section class="col-12 col-xm-12 col-md-3">hi</section>
  <section class="col-12 col-xm-12 col-md-6">
    <router-outlet></router-outlet>
  </section>
  <section class="col-12 col-xm-12 col-md-3">lo</section>
</div>

我的導航有一個搜索欄，它使用RouterLink路由到路徑'movies/:movieTitle/:year'並且只要我來自一條不像'movies/:movieTitle/:year'的路徑就行。 如果路徑類似，即使movieTitle和year參數不同，angular也不會重新渲染。

例如，如果我在家里'/'或'movies'我可以使用導航欄成功轉到'movies/The%20Dark%20Knight/2008' 。 但如果我在'movies/The%20Dark%20Knight/2008'我不能使用導航欄去'/movies/Taken/2008' 。 我相信這與Angular試圖減少類似路徑的重新渲染有關，但是當相同的路徑類型具有不同的參數時，如何讓Angular改變視圖？

額外信息

• 即使路線無法呈現新視圖，路徑網址也會在瀏覽器中更改，並且與頁面更改成功時的網址相同
• 我的導航組件中有角度導航事件。 我可以確認導航開始並且沒有導航錯誤。 還是要測試它是否取消。

回答

正如答案所說，我需要訂閱params。 以前當我獲得params時，我正在使用快照：

movieTitle = this.route.snapshot.paramMap.get('movieTitle');

現在我直接得到params並訂閱它們：

this.route.params.subscribe(params => {
      this.movieService.getMovie(params['movieTitle'], params['year'])
        .subscribe(movie => {
          this.movie = movie
        })
    })

Answer 1

路徑為空且沒有孩子的路線應該有pathMatch：'full'

{ path: '', component: MoviesComponent, pathMatch: 'full' },

路線的順序也很重要。 首先應該有更具體的路線：

{ path: 'movies/:movieTitle/:year', component: MovieReviewComponent },
{ path: 'movies', component: MoviesComponent },

如果只有路由參數發生變化，但路由保持不變，則Angular會重用該組件。 您需要訂閱params以獲得有關更改的通知。 該URL仍在更新中。

Answer 2

正如@Günter Zöchbauer在回答中所說，您需要訂閱params以獲得有關更改的通知。 這是你如何做到這一點......

假設您在OrderDetailComponent並且您希望顯示特定訂單的詳細信息，具有ID的/orders/1如/orders/1並正確顯示正確的訂單，如果ID更改為/orders/2 ， /orders/3 ，...這是執行該操作的代碼......

// order-detail.component.ts file

export class OrderDetailComponent implements OnInit {

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit() {
        // Subscribing to the route params is important as it fixes an issue as
        // Angular RouterLink may not work with same path but different params
        this.activatedRoute.params.subscribe(params => {
            console.log('URL Params', params);
            this.getOrder(+params.id);
        });
    }

    getOrder(id: number) {
        // Your code to get the order with the provided id...
    }
}