Question

我正在尝试更改项目中的某些代码，并且已经开始使用路线

我有一个菜单，其中的选项具有[routerLink];

这是我的路由模块的样子：

const routes: Routes = [
      { path: 'account-settings/account', component: AccountComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' } },
      { path: 'account-settings/password', component: PasswordComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' } },
      { path: 'account-settings/certificate', component: CertificateComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' } },
      { path: 'account-settings/notifications', component: NotificationsComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' } },
      { path: 'account-settings/preferences', component: PreferencesComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' } },
      { path: 'account-settings/security', component: SecurityComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' } },
]

如您所见，每条路线都有帐户设置，因此我创建了一个新组件AccountSettings

<div class="container padding-80">
    <h4 class="accountSettings-title">Account settings</h4>
</div>
<div class="container main justify-content-center">
    <div class="row account-content">
        <div class="col-3 account-sidebar">
            <account-settings-sidebar></account-settings-sidebar>
        </div>
        <div class="menu col-9">
            test
            <router-outlet></router-outlet>>
        </div>
    </div>
</div>

AccountSettingsSidebar具有类似的按钮

 <button [routerLink]="['/learning/account-settings/account']" [routerLinkActive]="['active']" type="button" class="list-group-item list-group-item-action">
      <p><i-feather name="user" data-feather="user" class="sidebar-icons"></i-feather>Account</p>
 </button>

我已使用此链接https://angular-2-training-book.rangle.io/routing/child_routes更改了路由模块，其中使用了用于设置帐户的主路由和用于上面显示的每条路由的子路由。

我的问题是，当我尝试访问任何路由（例如，帐户设置/帐户）时，我得到一个空白页，没有错误并且DOM中没有任何组件。我在哪里错了？

const routes: Routes = [
  { path: 'account-settings', component: AccountSettingsComponent,
    children: [
      { path: '', redirectTo: 'account', pathMatch: 'full', canActivate: [LearningRedirectGuard], data: { menuType: 'learning' }},
      { path: 'account', component: AccountComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' }},
      { path: 'password', component: PasswordComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' }},
      { path: 'notifications', component: NotificationsComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' }},
      { path: 'preferences', component: PreferencesComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' }},
      { path: 'security', component: SecurityComponent, canActivate: [LearningRedirectGuard], data: { menuType: 'learning' }}
    ]
  },
]

使用子级路由时没有错误的空白页

0 个答案: