Angular 无法在中路由到主页

Angular 无法在中路由到主页,angular,Angular,我在路由中遇到问题,当我在子路由中时,我注销,然后它会将我带回到该子路由,重新加载后,它会像应该的那样消失。 这是我的密码。 所有应用程序都在主组件中 app.module.ts @NgModule({ imports: [ RouterModule.forRoot([ { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home',

我在路由中遇到问题,当我在子路由中时,我注销,然后它会将我带回到该子路由,重新加载后,它会像应该的那样消失。 这是我的密码。 所有应用程序都在主组件中

app.module.ts

@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>