时间戳

首页 > 解决方案 > Angular Router，动态参数不允许上述路由工作

angular - Angular Router，动态参数不允许上述路由工作

问题描述

我试图创建一个期望和参数的页面，但如果我把它放在其他路线下面（例如：登录）它不再打开而是打开动态路线，并且页面需要是：www.website/dynamic-name什么可能导致错误？

应用路由

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './pages/home/home.component';
...

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full'},
  { path: 'home', component: HomeComponent },
  { path:'login', component: LoginComponent },//--> this one does not open login page, but instead open the below "PharmacyDetailsComponent "
  { path: ':name', component: PharmacyDetailsComponent } , //--> this one opens

但登录页面打不开];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, enableTracing: false,  useHash: true })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

调用页面

goToSupplierDetail(supplierName: string) {
        this.router.navigate([`${supplierName}`],{...});
 }

标签： angularangular-ui-routerangular6angular2-routing

解决方案

我认为您正在尝试导航到其他页面上的动态页面，例如主页或登录。所以你应该使用绝对路径。/在路由路径之前添加。

this.router.navigate([`/${supplierName}`]);

让我知道它是否有效。否则，您可以使用相对路径。

...
constructor(private route: ActivatedRoute) {}
...
this.router.navigate([`../${supplierName}`], { relativeTo: this.route });

推荐阅读