我有一个带参数的 RouterLink 元素的 anchor 元素。这些参数是导航到正确页面所必需的。现在,当我从不同的路径导航页面时,路由器链接可以工作。例如我的路由器模块看起来像这样:
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 更改 View ?
额外信息
- 即使路由无法呈现新 View ,浏览器中的路径 url 也会发生变化,并且与页面更改成功时的 url 相同
- 我的导航组件中有 Angular 导航事件。我可以确认导航开始并且没有导航错误。还是要测试它是否取消。
回答
正如答案所说,我需要订阅参数。以前,当我获取参数时,我使用的是快照:
movieTitle = this.route.snapshot.paramMap.get('movieTitle');
现在我直接获取参数并订阅它们:
this.route.params.subscribe(params => {
this.movieService.getMovie(params['movieTitle'], params['year'])
.subscribe(movie => {
this.movie = movie
})
})
最佳答案
具有空路径且没有子路径的路由应该有 pathMatch: 'full'
{ path: '', component: MoviesComponent, pathMatch: 'full' },
路线的顺序也很重要。 应该优先考虑更具体的路线:
{ path: 'movies/:movieTitle/:year', component: MovieReviewComponent },
{ path: 'movies', component: MoviesComponent },
如果只有路由参数发生变化,但路由保持不变,Angular 会重用该组件。您需要订阅参数以获取有关更改的通知。网址仍在更新。
关于Angular 5 RouterLink 不适用于相同的路径但不同的参数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49119717/