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

如何解决Angular 嵌套路由无法通过子路径加载页面

我在路线上有孩子：

   RouterModule.forRoot([
      { path: '',component: DashboardComponent,pathMatch: 'full' },{
        path: 'app-main',component: AppMainComponent,children: [
          { path: '',redirectTo: 'guarantee',{ 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 时，仪表板组件已正确加载。在这个组件中，我有到 quarantee 的链接：

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

当我点击此链接时出现错误：

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

我需要全屏显示网站仪表板和带有菜单的子组件。我在网上看到我必须使用路由孩子

---

我将 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'

解决方法

尝试使用：

<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