如何解决有命名出口的Angular 10子路线
我在路由时遇到了麻烦。 我有一个标准的顶级导航,可以正确路由(设置)。但我似乎无法在子导航中显示子路线以显示在子出口而不是主出口内。
我看到的错误是:
core.js:4197错误错误:未捕获(承诺中):错误:无法匹配 任何路线。网址段:“ settings / custom-song-properties”
{
path: 'settings',component: SettingsComponent,canActivate: [AuthGuard],children: [
{
path: 'custom-song-properties',component: CustomSongPropertiesComponent,outlet:'settings-outlet'
}
]
}
<mat-sidenav-container class="settings-container">
<mat-sidenav class="settings-side-nav" opened mode="side">
<mat-list>
<a [routerLink]="'account'" mat-list-item>Account</a>
<a [routerLink]="'theme'" mat-list-item>Theme</a>
<a [routerLink]="['custom-song-properties']" mat-list-item>Custom Song Properties</a>
</mat-list>
</mat-sidenav>
<mat-sidenav-content class="settings-content">
<router-outlet name="settings-outlet"></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
我在想什么?
解决方法
您必须将[routerLink]="['custom-song-properties']"
替换为[routerLink]="[{ outlets:{ 'settings-outlet': 'custom-song-properties' } }]"
,因为custom-song-properties
的路由配置对象定义了一个命名插座,而不是primary
,这是默认插座。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。