Angular 7 navigate меняет URL соответственно, НО не загружает компонент - PullRequest
Новая
       40

Angular 7 navigate меняет URL соответственно, НО не загружает компонент

1 голос
/ 14 октября 2019

после того, как попробовал любое другое решение, я все еще застрял в своей проблеме, которая заключается в следующем: попытка перейти к другому компоненту, URL-адрес изменен, но я остаюсь на той же странице, целевой компонент не загружен .

Объяснение:

Когда пользователь входит в приложение на основе хранилища сеансов, он переходит к HOME компонент или компонент LOGIN .

  • Если он приземлится на компонент HOME, ВСЕ работает , он может перемещаться в любом месте приложения.

  • в противном случае, если он попадет на ЛОГИН, затем войдет в систему сам, а затем перенаправит на компонент HOME, только тогда больше не будет работать навигация, меняется только URL.

Я использовал lazy-loading и 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;   
  }
}

Мой app.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])

1 Ответ

0 голосов
/ 28 октября 2019

Я понял мою проблему. Это было из-за условий *ngIf на моем <router-outlet><router-outlet>.

, поэтому моя проблема заключалась в том, что один маршрутизатор-розетка был зарегистрирован, и независимо от того, что вы делаете, следующий маршрутизатор-розетка не реагировал на изменения маршрута.

Я снял свои условия, и это сработало.

Спасибо.

...