如果页面是从另一个组件刷新和导航的，则不会在组件上调用 ngOnInit()

Question

我在我的一个大学项目中偶然发现了这个问题，这让我很困扰。

设置如下：我有一个显示一组项目的组件和一个登录组件。

如果我在显示组件上刷新页面，将按预期调用ngOnInit() ，然后我注销并再次登录，但ngOnInit()没有再次被调用，这是有问题的，因为我想用不同的用户登录，但我会看到第一个登录用户的数据。

我注意到同样的问题也会以相反的方式发生。 我从登录页面开始，并刷新它。 ngOnInit()会被调用，然后我继续登录，然后退出，然后我回到登录页面，但是ngOnInit()没有再次调用，并且第一个用户的凭据仍在输入中领域。

在第二种情况下，我可以注销并登录，显示组件将始终调用ngOnInit()方法，这正是我想要的。

我的问题是，如果在此组件上进行了刷新，为什么ngOnInit()在我从其他地方导航到当前组件后不会在当前组件上触发？ 如果此组件没有刷新，为什么ngOnInit()总是以其他方式触发。

我使用路由器在这些页面之间导航。 我在 SO 上检查了类似的问题，但没有真正找到任何问题； 我试图为路由器添加一些重用路由策略，但没有运气。

如果相关，我将提供代码示例，但我试图使问题尽可能简单。

更新 #1

下面是一些代码示例：

bill-list.component.ts

@Component({
  selector: 'app-bill-list',
  templateUrl: './bill-list.component.html',
  styleUrls: ['./bill-list.component.scss'],
})
export class BillListComponent implements OnInit {

  ...

  constructor(private router: Router, private billService: BillService,
              private websocketService: WebsocketService, private loadingController: LoadingController) {
  }

  ngOnInit() {
    console.log('on init');
    this.initDataForCurrentUser();
  }

  logout() {
    Storage.remove({key: 'AUTH_TOKEN'}).then(_ => {
      if (this.websocketSubject) {
        this.websocketSubject.complete();
        this.websocketSubject = null;
      }
      this.userToken = null;
      this.router.navigate(['/login']).then();
    });
  }

  ...

}

登录.component.ts

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {

  ...    

  ngOnInit() {
    console.log('login - onInit');
    Storage.get({key: 'AUTH_TOKEN'}).then(authToken => {
        if (authToken.value !== null) {
          this.router.navigate(['/']).then();
        }
      }
    );
  }

  login(): void {
    this.loadingController.create({message: 'Logging in...'}).then(response => {response.present().then(() => {});});
    this.authService.login(this.username, this.password).subscribe(
      response => {
        const authToken = response.token;
        Storage.set({key: 'AUTH_TOKEN', value: authToken}).then(_ => {
            this.router.navigate(['/']).then();
          }
        );
        this.loginError = null;
        this.loadingController.dismiss().then(() => {});
      },
      error => {
        this.loginError = error;
        this.loadingController.dismiss().then(() => {});
      }
    );
  }

  ...

}

更新 #2

我们也在这个项目中使用了 Ionic 框架，我发现了ionViewDidEnter钩子，它似乎在每次输入组件时都会调用，它符合我的需求。

然而，问题仍然存在，因为这个问题可能出现在不使用 Ionic 的项目中。

Answer 1

尝试在登录组件上监听路由器事件方法，如下所示：

export class LoginComponent implements OnInit {
    ...
    constructor(private router: Router) {
        router.events.subscribe(event => {
          if (event instanceof NavigationEnd) {
            this.ngOnInit();
          }          
        }
      );
    }

    ngOnInit() {
        console.log('login - onInit');
        Storage.get({key: 'AUTH_TOKEN'}).then(authToken => {
            if (authToken.value !== null) {
              this.router.navigate(['/']).then();
            }
          }
        );
      }
     ...
}