Angular 7 导航正在相应地更改 URL，但不会加载组件

Question

在尝试了所有其他解决方案之后，我仍然遇到我的问题：尝试导航到其他组件，URL 已更改，但我留在同一页面上，目标组件未加载。

解释：

当用户到达 App 时，根据会话存储，他会转到HOME 组件或LOGIN 组件。

• 如果他登陆主页组件，一切正常，他可以在应用程序中导航到任何地方。

• 否则，如果他登陆 LOGIN，然后登录自己，然后重定向到 HOME 组件，那么就不再有导航工作，只有 url 发生变化。

我使用了延迟加载和 authGuard。

控制台上没有错误。

上述两种情况之间的路由器跟踪日志是相同的（我的意思是在第二种情况下，NavigationEnd 组件是正确的目标组件，但它从未加载）

这是我的app-routing.module.ts：

 const routes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
  },
  {
    path: 'home',
    loadChildren: './pages/home/home.module#HomeModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'description',
    loadChildren: './pages/description/description.module#DescriptionModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'nsp',
    loadChildren: './pages/nsp/nsp.module#NspModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: 'mappings',
    loadChildren: './pages/mappings/mappings.module#MappingsModule',
    canActivate: [AuthGuard]
  },
  {
    path: 'performances',
    loadChildren: './pages/performances/performances.module#PerformancesModule',
    canActivate: [AuthGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true })],
  exports: [RouterModule] 
})
export class AppRoutingModule { }

这是我的auth-guard.service.ts：

export class AuthGuardService implements CanActivate {

  constructor(private storageFactory: StorageFactoryService, 
              public auth: AuthentificationService, 
              public router: Router) {}

  session_date_expire_on: string;

  canActivate(_route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {

    if (this.storageFactory.get('ssid_expires_on') != null) {
      var date_stored = 
                  new Date(this.storageFactory.get('ssid_expires_on').value);
    } 
    var current_date = new Date();

    if (typeof this.storageFactory.get('userid') !== 'undefined' &&
        this.storageFactory.get('userid') !== null && 
        date_stored > current_date) {

      this.storageFactory.remove('ssid_expires_on');
      this.session_date_expire_on = new Date(current_date.getTime() +
                                      environment.inactivity_timeout).toString();
      this.storageFactory.set('ssid_expires_on', this.session_date_expire_on);
      current_date = null;
      return true;
    }

    localStorage.clear();
    sessionStorage.clear();
    this.router.navigate(['/login']);
    return false;   
  }
}

myapp.component.ts直接重定向到 HOME 组件，因此调用 authGuard 并在需要时重定向到 LOGIN：

export class AppComponent implements OnInit {

constructor(private checkSessionService: CheckSessionService, 
            private storageFactory: StorageFactoryService, 
            private ElementRef: ElementRef, 
            private api_user: AuthentificationService, 
            private router: Router) { }

  ngOnInit() {
    console.log("--------- App Component ---------");
    this.router.navigate(['/home']);
  }
}

问题是当我转到login.component.ts并单击日志功能时，如果用户经过身份验证，它会转到主页，然后导航不起作用：

export class LoginComponent implements OnInit {
  user: UserInfo;
  current_date = new Date();
  session_date_expire_on: string;
  access_granted: boolean;

  constructor(private ngZone: NgZone, 
              private storageFactory: StorageFactoryService, 
              private api_user: AuthentificationService, 
              private router: Router, 
              private route: ActivatedRoute) { }

  ngOnInit() {}

  log() {
    return this.api_user.getUser().subscribe(response => {
      if (response.status == 200) {

        this.user = response.body;
        this.session_date_expire_on = new Date(this.current_date.getTime() +
                                      environment.inactivity_timeout).toString();
        this.storageFactory.set('userid', this.user.userId);
        this.storageFactory.set('usercountry', this.user.entityCountryName);
        this.storageFactory.set('userrights', this.user.profile[0]);
        this.storageFactory.set('ssid', uuid());
        this.storageFactory.set('ssid_expires_on', this.session_date_expire_on);

        this.router.navigate(['/home']);

      } else {
        this.router.navigate(['/login']);
      }
    })
  }
}

你有什么想法 ？

我已经尝试过..-->this.router.navigate([../home])

Answer 1

我已经弄清楚我的问题了。这是因为*ngIf我的条件<router-outlet><router-outlet>。

所以我的问题是一个路由器出口已注册，无论您做什么，下一个路由器出口都不会响应路由更改。

我删除了我的条件并且它起作用了。

感谢您。