Angular 嵌套路由无法通过 child 路径加载页面

Question

我有children条路线：

   RouterModule.forRoot([
      { path: '', component: DashboardComponent, pathMatch: 'full' },
      {
        path: 'app-main', component: AppMainComponent,
        children: [
          { path: '', redirectTo: 'guarantee', pathMatch: 'full' },
          { path: 'guarantee', component: GuaranteeComponent },
        ]
      },
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent }

我的 app.component.html 看起来像：

<div class="container">
  <router-outlet></router-outlet>
</div>

我的 app-main.component.html 看起来像：

<div class="site d-flex">
  <div class="right-side">
    <div class="content d-flex flex-column">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

当我在浏览器中键入 localhost:4200 仪表板组件已正确加载。在这个组件中，我有 link 到 quarantee:

  <li class="nav-item" [routerLinkActive]="['link-active']">
      <a [routerLink]="['guarantee']">Guarantee</a>
  </li>

当我点击这个 link 我得到错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'guarantee'
Error: Cannot match any routes. URL Segment: 'guarantee'
    at ApplyRedirects.noMatchError (router.js:4295)
    at CatchSubscriber.selector (router.js:4259)
    at CatchSubscriber.error (catchError.js:27)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)
defaultErrorLogger @ core.js:6014
handleError @ core.js:6066
next @ core.js:40558
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
(anonymous) @ core.js:39738
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
onHandleError @ core.js:39735
handleError @ zone-evergreen.js:363
runGuarded @ zone-evergreen.js:137
api.microtaskDrainDone @ zone-evergreen.js:663
drainMicroTaskQueue @ zone-evergreen.js:566
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629

我需要全屏显示网站仪表板和带菜单的 children 组件。我在互联网上看到我必须使用路线 children

我将 routerLink 更改为这个值：

<a [routerLink]="['/app-main/guarantee']">Guarantee</a>

同样的错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'app-main/guarantee'
Error: Cannot match any routes. URL Segment: 'app-main/guarantee'

Answer 1

尝试使用：

<li class="nav-item" [routerLinkActive]="['link-active']">
    <a [routerLink]="['/', 'app-main']">Guarantee</a>
</li>

这是工作 stackblitz:

https://stackblitz.com/edit/angular-ivy-lhjpbv?file=src/app/dashboard/dashboard.component.html

Angular 嵌套路由无法通过 child 路径加载页面

Angular nested routes cannot load page by child path

angular-ui-router

angular