Angular 8 可选 url 参数

Question

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 集具有相同的布局集。 so my first url will be like http://localhost:4200/account - this works fine http://localhost:4200/20/account - this is my 2nd url and this doesn't work and the error message is

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

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

Answer 1

您可以删除 path:':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();
            }
        });      }