angular - 路由的 url 使用 Angular 回到默认路由
问题描述
我有 Angular 9 应用程序。
我有一些路线。我有一个这样的父溃败:http://localhost:4200/desktop
现在我有我想去的组件:http://localhost:4200/desktop/testDesktop
但如果我想在浏览器中访问它会返回:http://localhost:4200/desktop
所以这就是我所拥有的:
app.component.html
<app-nav-bar></app-nav-bar>
<router-outlet></router-outlet>
app.routing.module.ts:
const routes: Routes = [
{
path: 'mobile', loadChildren: () =>
import('../app/mobile-dashboard/mobile-dashboard.module').then(m => m.MobileDashboardModule)
},
{
path: 'desktop', loadChildren: () =>
import('./desktop-dashboard/desktop-dashboard.module').then(m => m.DesktopDashboardModule),
},
{
path: 'autologin',
component: AutoLoginComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
和
desktop.routing.module.ts:
const routes: Routes = [
{ path: '', component: DesktopDashboardComponent },
{ path: 'desktop/testDesktop', component: TestDesktopComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DesktopRoutingModule {}
和 desktop.dashboard.module.ts:
@NgModule({
declarations: [DesktopDashboardComponent, BarChartComponent, TestDesktopComponent],
imports: [
CommonModule,
SharedModule,
DragDropModule,
MatCardModule,
MatGridListModule,
DesktopRoutingModule
],
exports: [TestDesktopComponent]
})
和 desktop.dashboard.html 我添加了这个:
<router-outlet></router-outlet>
但它不会去:
http://localhost:4200/desktop/testDesktop
那么我必须改变什么?
谢谢
和
app.modulet.ts 看起来像这样:
export function configureAuth(oidcConfigService: OidcConfigService) {
return () =>
oidcConfigService.withConfig({
stsServer: 'http://localhost:4430',
redirectUrl: window.location.origin,
clientId: 'crowd-dashboard',
scope: 'openid profile dashboard-api ',
responseType: 'code',
postLogoutRedirectUri: window.location.origin,
unauthorizedRoute: '/unauthorized'
});
}
@NgModule({
declarations: [AppComponent, NavBarComponent],
imports: [
AppRoutingModule,
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
DragDropModule,
MatCardModule,
MatGridListModule,
MatProgressSpinnerModule,
MatCheckboxModule,
MatIconModule,
DesktopDashboardModule,
MobileDashboardModule,
AuthModule.forRoot(),
BsDropdownModule.forRoot()
],
providers: [
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: configureAuth,
deps: [OidcConfigService],
multi: true
},
{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
],
bootstrap: [AppComponent]
})
export class AppModule {}
解决方案
您的子路线必须是相对路线。父母已经表示要去/desktop
。
您的子路线应该是:
const routes: Routes = [
{ path: '', pathMatch: 'full', component: DesktopDashboardComponent },
{ path: 'testDesktop', component: TestDesktopComponent }
];
请注意,我还pathMatch: 'full'
为您的空路径添加了一个,否则其他路线将被忽略。
推荐阅读
- c++ - 将值分配给指针C++时出现分段错误
- javascript - 如何在反应js中对图像字段进行验证要求
- python - Pygame恐龙图像不断重复
- java - ==运算符比较int和byte
- drools - Drools 的依赖 xstream 和 Java 11 的兼容性
- excel - Excel VBA 更新图表不可见
- javascript - aws-sdk 仅使用需要的包,例如 canwatchlog 和 config(带有凭据)
- php - 我想使用构造方法显示学生详细信息
- c++ - 单链表查找最大值,最小值
- wpf - 在 ItemsControl WPF 中将项目拖放到顶部或项目之间