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();
            }
        });      }