Angular 无法在中路由到主页
我在路由中遇到问题,当我在子路由中时,我注销,然后它会将我带回到该子路由,重新加载后,它会像应该的那样消失。 这是我的密码。 所有应用程序都在主组件中 app.module.tsAngular 无法在中路由到主页,angular,Angular,我在路由中遇到问题,当我在子路由中时,我注销,然后它会将我带回到该子路由,重新加载后,它会像应该的那样消失。 这是我的密码。 所有应用程序都在主组件中 app.module.ts @NgModule({ imports: [ RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home',
@NgModule({
imports: [
RouterModule.forRoot([
{ path: '',
redirectTo: 'home', pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent,
children: [
{ path: 'test', component: TestComponent },
{ path: 'test2', component: Test2Component },
{ path: 'department',
component: DepartmentComponent,
// canActivate: [AuthGuard],
children: [
{ path: '', component: ListComponent},
{ path: 'add', component: AddComponent },
]
},
]
},
// { path: 'test',
// component: AdminComponent,
// canActivate: [AdminAuthGuard, AuthGuard]
// },
{ path: 'no-access', component: NoAccessComponent },
{ path: '**', component: NotFoundComponent }
]),
NgbModule,
],
providers: [
AuthService,
PostAuthService,
HttpClient,
AuthGuard,
ManagerAuthGuard,
{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true}
],
bootstrap: [AppComponent]
})
export class AppModule { }
我的主页组件
<ng-http-loader></ng-http-loader>
<app-toasts></app-toasts>
<inactivity-timer></inactivity-timer>
<div *ngIf="!authService.isLoggedIn(); else loggedInContent" class="container-fluid">
<div class="row">
<div class="col-lg-5 col-md-8 col-sm-6 p-0 m-auto">
<div class="min-vh-100 m-0 d-flex flex-column justify-content-center">
<app-login
*ngIf="!authService.isLoggedIn()"
(passwordExpiredToast)="passwordExpiredToast($event)">
</app-login>
</div>
</div>
</div>
</div>
<ng-template #loggedInContent>
<div style="position: fixed;left: 0;right: 0;z-index: 999;" class="navbar-div">
<app-navbar
[changeNavColor]="changeNavColor"
></app-navbar>
</div>
<div style="height: 115px;"></div>
<router-outlet></router-outlet>
</ng-template>
<div class="m-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link"
[routerLink]="['/home/department']"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">List</a>
</li>
<li class="nav-item">
<a class="nav-link"
[routerLink]="['add']"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">Add</a>
</li>
</ul>
<router-outlet></router-outlet>
</div>
我的服务
logout(): Observable<any> {
const body = {username : this.currentLoggedInUser};
return this.http.post<any>('url:security/user-logout',
JSON.stringify(body) );
}
logout():可观察
列表组件位于inturn所在的部门内
请帮助信息有限的情况下很难重现您的示例,您能否创建一个示例并与他人分享。
<div class="m-3">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link"
[routerLink]="['/home/department']"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">List</a>
</li>
<li class="nav-item">
<a class="nav-link"
[routerLink]="['add']"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }">Add</a>
</li>
</ul>
<router-outlet></router-outlet>
</div>