如何解决使用子级路由时没有错误的空白页
我正在尝试更改项目中的某些代码,并且已经开始使用路线
我有一个菜单,其中的选项具有[routerLink];
这是我的路由模块的样子:
const routes: Routes = [
{ path: 'account-settings/account',component: AccountComponent,canActivate: [LearningRedirectGuard],data: { menuType: 'learning' } },{ path: 'account-settings/password',component: PasswordComponent,{ path: 'account-settings/certificate',component: CertificateComponent,{ path: 'account-settings/notifications',component: NotificationsComponent,{ path: 'account-settings/preferences',component: PreferencesComponent,{ path: 'account-settings/security',component: SecurityComponent,]
如您所见,每条路线都有帐户设置,因此我创建了一个新组件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',data: { menuType: 'learning' }},{ path: 'account',{ path: 'password',{ path: 'notifications',{ path: 'preferences',{ path: 'security',data: { menuType: 'learning' }}
]
},]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。