3

パラメータを取る RouterLink 要素を持つアンカー要素があります。パラメータは、正しいページに移動するために必要です。別のパスからページをナビゲートすると、ルーター リンクが機能するようになりました。たとえば、ルーター モジュールは次のようになります。

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にビューを変更させるにはどうすればよいですか?

追加情報

  • ルートが新しいビューのレンダリングに失敗した場合でも、ブラウザーでパスの URL が変更され、ページの変更が成功した場合と同じ URL になります。
  • ナビゲーション コンポーネントに角度のあるナビゲーション イベントがあります。ナビが起動し、ナビエラーがないことを確認できます。キャンセルするかどうかをテストする必要があります。

答え

答えが言うように、私はパラメータを購読する必要がありました。以前、パラメータを取得していたとき、スナップショットを使用していました:

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
        })
    })
4

2 に答える 2