路由的 url 使用 Angular 回到默认路由

Question

我有 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 {}

Answer 1

您的子路由必须是相对路由。 家长已经表示要去/desktop。

您的子路线应该是：

const routes: Routes = [
  { path: '', pathMatch: 'full', component: DesktopDashboardComponent },
  { path: 'testDesktop', component: TestDesktopComponent }
];

请注意，我还为您的空路径添加了pathMatch: 'full'，否则其他路由将被忽略。

Working StackBlitz