重定向后模态窗口消失。角

Question

我需要你的帮助。我有一个模式，我想在登录后立即显示。我登录后，

ngOnInit

内的效果和代码仅触发一次。此代码对我来说无法正常工作，因为我显示模式窗口的条件为真，但在显示模式后立即发生重定向，关于效果中的条件，模态窗口立即消失。请告诉我代码中的错误在哪里？为什么我的模式在重定向后消失以及如何修复？非常感谢你

html

<modalSlideUp [isModalShow]="modalIsShown">
 <form [formGroup]="form">
      <input type="checkbox" formControlName="stayInTheSystem">
      <h4> Don`t ask me again </h4>
      <button> Yes </button>
      <button> No </button>
 </form>
</modalSlideUp>

打字稿

 _modalIsShown: boolean = false;

 get modalIsShown(): boolean {
   return this._modalIsShown;
 }

 set modalIsShown(value: boolean) {
   console.log(value, 'value in setter'); // true
   this._modalIsShown = true;
 }


ngOnInit() {
   this.effects.AuthenticationSuccess.subscribe((data) => 
     let isModalShow: boolean =
      (
        this.tokenService.getUserSavedIsa(this.user?.id) === true ||
        localStorage.getItem('userRecords') === null ||
        localStorage.getItem('dontAskAgain') === 'false'
      );
      this.modalIsShown = isModalShow;
      setTimeout(() => {
         console.log(this.isTokenModalWindowOpened, 'timeout'); // true
       }, 5000)
   })

}

效果

AuthenticationSuccess: Observable<any> = createEffect(() => this.actions$.pipe(
  ofType(idenityActions.ActionTypes.AUTHENICATION_SUCCESS),
  tap((user:any) => {

    const savedUrl = localStorage.getItem('intendedUrl');

      if (!(user.payload as AuthenticateResponseModel).isAuthenticated) {
        this.router.navigateByUrl("/non-activate", { skipLocationChange: false });
      } else if (!savedUrl && user.payload.firstSetup === false) {
        this.router.navigateByUrl("/");
      } else if (savedUrl && user.payload.firstSetup === false) {
        this.router.navigateByUrl(savedUrl);
        setTimeout(() => {
          localStorage.removeItem('savedUrl');
        }, 3000)
      } else if (savedUrl && user.payload.firstSetup === true) {
        this.router.navigateByUrl('/my-profile/settings');
      }

  })
),{ dispatch: false });

Answer 1

您需要密切关注是否发生了重定向。 试试这个并让我知道。

  _modalIsShown: boolean = false;
    _redirectOccurred: boolean = false;
    
    get modalIsShown(): boolean {
      return this._modalIsShown;
    }
    
    set modalIsShown(value: boolean) {
      console.log(value, 'value in setter'); // true
      this._modalIsShown = value;
    }
    
    ngOnInit() {
      this.effects.AuthenticationSuccess.subscribe((data) => {
        if (!this._redirectOccurred) {
          let isModalShow: boolean =
            (
              this.tokenService.getUserSavedIsa(this.user?.id) === true ||
              localStorage.getItem('userRecords') === null ||
              localStorage.getItem('dontAskAgain') === 'false'
            );
          this.modalIsShown = isModalShow;
          setTimeout(() => {
            console.log(this.isTokenModalWindowOpened, 'timeout'); // true
          }, 5000);
        }
      });
    
      // Set the redirect occurred flag to true after the modal is shown
      this.effects.Redirect.subscribe(() => {
        this._redirectOccurred = true;
      });
    }