Question

我正在编写角度应用程序。在应用程序中，有两个文件夹：admin和fron-app。我想要的是，如果键入localhost：4200 / admin，那么管理模块将激活，用户应该看到仪表板（localhost：4200 / admin / dashboard）;如果用户键入localhost：4200 / app，则激活fron-app模块（localhost：4200 / app / profile）。现在，当我键入localhost：4200 / app时，将激活管理模块。怎么了？

这是主模块

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    MyDateRangePickerModule,
    RouterModule.forRoot(appRoutes, { useHash: true }),
    NgxPermissionsModule.forRoot(),
    AdminModule
  ],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [DashboardService, StatisticService, OfficeService, UserLdapService,
    CommissionService, AuthService, AuthGuard, GoalService, UserService, {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true,
    }],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是主要路线

export const appRoutes: Routes = [

  {
    path: 'admin',
    loadChildren: 'app/admin/admin.module#AdminModule'
  },
  {
    pathMatch:'full',
    path: 'app',
    loadChildren: 'app/front-app/front-app.module#FrontAppModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

管理模块

@NgModule({
    declarations: [
        AdminComponent,
        DashboardComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        RouterModule.forChild(adminRoutes),
        NgxPermissionsModule.forRoot(),
    ],
    exports:[
        RouterModule
    ],
    schemas: [NO_ERRORS_SCHEMA],
    providers: [DashboardService, StatisticService, OfficeService, UserLdapService,
        CommissionService, AuthService, AuthGuard, GoalService, UserService, {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true,
        }],
})
export class AdminModule { }

管理路线

export const adminRoutes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {
        pathMatch: 'full',
        path: '',
        redirectTo: 'dashboard',
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]

  },

];

前台应用路线

export const frontAppRoutes: Routes = [
  {
    path: '',
    component: FrontAppComponent,
    children: [
      {
        path: 'goals',
        component: GoalsComponent
      },
      {
        path: 'login',
        component: FrontLoginComponent
      },
      {
        path: 'profile',
        component: ProfileComponent
      },
    ]

  },

];

Answer 1

从路径中删除app并添加redirectTo路径

Stackblitz Demo

export const appRoutes: Routes = [

  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  {
    pathMatch:'full',
    path: 'app',
    loadChildren: './front-app/front-app.module#FrontAppModule'
  },
  {
    path: '',
    redirectTo: 'app',
    pathMatch: 'full'
  }
]

弯角路线现在可以正常工作

1 个答案: