时间戳

首页 > 解决方案 > Angular 8 可选 url 参数

angular - Angular 8 可选 url 参数

问题描述

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

import { LayoutComponent } from './layouts/layout.component';

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: ':id',
        loadChildren: './layouts/layout.module#LayoutModule'
      }
    ]
  },
  {      /* THIS BELOW BLOCK WORKS */
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: './layouts/layout.module#LayoutModule'
      }
    ]
  }
];

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

我正在尝试拥有 2 个具有相同布局的不同 url 集。所以我的第一个 url 就像 http://localhost:4200/account - 这很好 http://localhost:4200/20/account - 这是我的第二个 url，这不起作用，错误消息是

core.js:5882 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '20/account'

我不确定我哪里出错了，任何人都可以帮助解决这个问题吗？

标签： angulartypescriptangular-routingangular-router

解决方案

您可以删除路径 :':id' 并在承包商中获取参数：

  public constructor(
        private route: ActivatedRoute,
        private router: Router,
        injector: Injector
    ) {
        super(injector);
        this.route.params.subscribe((p) => {
            this.stateIdFilter = [Number.parseInt(p.id)];
            if (p.id) {
               this.getData();
            }
        });      }

推荐阅读