首页 > 解决方案 > 角度 6 router.redirect 不调用 onInit()

问题描述

我的导航有问题。我的目标是:

登录后,启用一些菜单项,隐藏其他菜单项,重定向到某个页面

我的 appComponent.ts 代码:

 ngOnInit() {
    const identity = ApiQueryService.GetIdentity();
    if (identity === null || identity.length < 1) {
      this.logged = false;
    } else {
      this.logged = true;
    }
  }

我的 appComponent.html 代码:

<ng-container *ngIf="!logged">
  <nav>
    <a class="btn btn-outline-primary" [routerLink]="['/register']" routerLinkActive="router-link-active">Register</a>
    <a class="btn btn-outline-primary" [routerLink]="['/login']" routerLinkActive="router-link-active">Login</a>
  </nav>
<router-outlet></router-outlet>
</ng-container>


<ng-container *ngIf="logged">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
  <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
    <a class="btn btn-outline-primary" [routerLink]="['/myProfile']" routerLinkActive="router-link-active">My profile</a>
    <a class="btn btn-outline-primary" [routerLink]="['/friends']" routerLinkActive="router-link-active">Friends</a>
    <a class="btn btn-outline-primary" [routerLink]="['/messages']" routerLinkActive="router-link-active">Messages</a>
    <a class="btn btn-outline-primary" [routerLink]="['/find']" routerLinkActive="router-link-active">Find users</a>
  </div>

  <div class="navbar-collapse collapse w-100 order-2 dual-collapse2">
    <a class="btn btn-outline-danger" type="button" (click)="logout()">Wyloguj</a>
  </div>
</nav>

<div class="container" style="width:70%; margin-top: 10px;">
    <router-outlet></router-outlet>
    </div>

</ng-container>

如您所见,如果有人登录,我在 appComponent.ts 中登录了变量,我不想显示登录/注册菜单

所以,下一个组件是登录组件:

onSubmit(loginFormRef: NgForm) {
      this.usersService.LoginUser(this.login, this.password).subscribe(result => {
      this.logged = true;

      loginFormRef.resetForm();
      this.router.navigate(['/myProfile']);
    }, (error) => {
      ApiQueryService.ClearLoginInfos();
      this.loginFailed = true;
      console.log(error);
    });
  }

在我的个人资料中,就像您必须登录的所有其他组件一样:

ngOnInit() {
 this.identity = ApiQueryService.GetIdentity();
    if (this.identity.length < 1) {
      this.router.navigate(['/login']);
    }
    this.fillUserDetailsDictionary();


  }

问题是登录后,它不会在 appCopomonent 上中断。ngOnInit() 和 myProfile.ngOnInit() 都被标记为 impelement ngOnInit

如果我在网络浏览器上按 [enter] 键盘,它可以正常工作;)

标签: angular

解决方案


推荐阅读