时间戳

首页 > 解决方案 > 角度嵌套路由无法按子路径加载页面

angular - 角度嵌套路由无法按子路径加载页面

问题描述

我在路线上有孩子：

   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仪表板组件时正确加载。在这个组件中，我有到 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'

标签： angularangular-ui-router

解决方案

尝试使用：

<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

推荐阅读