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

url 的路由返回到 Angular 的默认路由

url of route goes back to default route with Angular

angular

typescript

routes

angular2-routing