当我更改页面时，ionViewDidLeave 和 ionViewDidEnter 没有触发

Posted 2023-03-13

【中文标题】当我更改页面时，ionViewDidLeave 和 ionViewDidEnter 没有触发

【英文标题】：ionViewDidLeave and ionViewDidEnter not firing when i change pages

【发布时间】：2020-02-11 15:04:06

【问题描述】：

我有一个使用 Angular 7 开发的 Ionic 4 应用程序，如果我第一次在页面上输入，事件 ionViewDidEnter 有效，但如果我移动到另一个页面并返回此事件不会触发。

我从 Angular 更改为 ngOnDestroy，这在第一次加载页面时有效，但是当我转到该页面并返回并让它不工作时。

我的真正问题是我有一个登录页面和一个主页面板页面，当我从我的 app.component.ts 启动我的 ngOnInit 应用程序时，他会验证用户是否已登录，是否将用户重定向到面板主页使用此代码

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

发生这种情况时，此事件 ionViewDidEnter 和 ionViewWillEnter 在此页面出现时起作用，但是当我单击按钮注销时，我的应用程序会清除缓存并将导航更改为此页面 auth.component.ts this是注销的代码

public logout(refresh?: boolean): void 
    this.tokenStorage.clear();
    if (refresh) 
      this.router.navigate(['auth']);
    
  

简单，但是当我再次登录时，此事件 ionViewDidEnter 和 ionViewWillEnter 不会触发，我希望每次用户进入面板主页时都会触发此事件，这是我要记录的代码在应用中

async authenticationLogin() 
    const loading = await this.loadingController.create(
      message: 'Autenticando',
    );
    loading.present();

    const userModel: any = 
      afiliate_code: this.authForm.value.afiliate_code,
      device_uuid: this.device.uuid,
    ;
    let companyCode: string = this.authForm.value.company_code;
    companyCode = companyCode.toUpperCase();

    this.auth.login(userModel, companyCode, this.uuidValidation).pipe(
    catchError(
      (error: any): Observable<any> => 
        loading.dismiss();
        return this.utilService.errorHandler(error);
      ))
    .subscribe( async response => 
      if (response.responseData.success === 1) 
        if (this.authForm.value.checkauth_param) 
          this.authParam = 
            afiliate_code: userModel.afiliate_code,
            companyCodeData: companyCode,
          ;
          this.storageService.saveKeyStorage('param', this.authParam);
         else 
          if (this.storageService.getKeyParamData('param')) 
            this.storageService.removeKeyStorage('param');
          
        
        this.submitted = false;
        setTimeout(() => 
          this.authForm.reset();
        , 2000);
        this.router.navigate(['painel/home']);
       else if (response.responseData.success === 2) 
        this.utilService.errorMsgAlert(response.responseData.message);
       else if (response.responseData.success === 3) 
        const alert = await this.alertController.create(
          header: 'Atenção!',
          message: 'Você ainda não possui um dispositivo vinculado, deseja vincular este dispositivo ao seu usuário?',
          buttons: [
            
              text: 'Não',
              role: 'cancel',
              cssClass: 'secondary'
            , 
              text: 'Sim',
              handler: () => 
                this.uuidValidation = true;
                this.authenticationLogin();
              
            
          ]
        );
        await alert.present();
       else 
        this.utilService.errorMsgAlert('Não foi possível fazer autenticação');
      
      loading.dismiss();
    );
  

这很好，我做错了什么没有触发这些事件？

【问题讨论】：

尝试使用onViewWillEnter，它与ionViewDidEnter基本相同，除了ionViewWillEnter在进入页面时触发，在它成为活动页面之前。

在您的用例中您如何定义返回？通过浏览器“返回”或通过应用内返回按钮/箭头？

我使用这个命令在页面中导航 Sergey this.router.navigate(['painel/home']);

【参考方案1】：

我用这个解决了我的问题，我正在使用来自 Angular 7 核心的代码来更改我的页面

 // import  Router  from '@angular/router';
 this.router.navigate(['painel/home']);

但是当我换成 Ionic 4 核心时

 // import  NavController  from '@ionic/angular';
 this.navController.navigateBack(['painel/home']);

现在每次都会触发 ionViewDidEnter，我阅读了这篇文章并解决了我的问题。

谢谢大家

https://medium.com/@paulstelzer/ionic-4-and-the-lifecycle-hooks-4fe9eabb2864

【参考方案2】：

尝试使用ionViewWillEnter，它与ionViewDidEnter基本相同，除了ionViewWillEnter在进入页面时触发，在它成为活动页面之前。

【讨论】：

我会试试这个看看会发生什么

【参考方案3】：

您可以使用订阅者检测路线变化

只要显示您的页面，此代码就会运行

    import  ActivatedRoute  from '@angular/router';
    
    constructor(
        private routerActive:ActivatedRoute
      ) 
    
    ngOnInit() 
        this.routerActive.paramMap.subscribe(paramMap => 
            if (this.router.url === "/yourURL") 

              // ***** This runs whenever your page is displayed ******

            
        )