使用object.assign更新ngrx狀態{}，狀態得到更新後頁面自動重定向

Question

我成功登錄後將用戶添加到ngrx狀態。登錄後，將相同的用戶添加到該狀態。在從配置文件頁面部分更新用戶詳細信息並使用Object.assign{}替換狀態後，用新數據替換舊狀態，但在該操作之後，頁面自動重定向。

我想盡一切辦法來糾正代碼。頁面自動將我重定向到我的主頁。我沒有在任何地方使用任何router.navigate('')。

我使用：NGRX /存儲=> v.4.0.4

下面是減速機，操作代碼和效果：

effects.ts 

@Effect() 
    userUpdate$ = this.actions$ 
     .ofType(AuthActions.USER_UPDATE) 
     .map((action: AuthActions.userUpdate) => action.payload) 
     .mergeMap(response => 
      this.authService.retrieveLoggedUser(response.uid, response.token) //will get the user details 
      .map(res => { 
       var resObj = { user: res }; 
       return resObj; 
      }).switchMap(user =>new UserActions.loadUserUpdate(resObj.user) //returns new action to update the user in state 
      ) 
      .catch((error: any) => { 
       return of(new UserActions.loadUserFailure(error)); 
      }) 
     ); 

我能夠更新使用Object.assing{}狀態，獲得狀態中的適當值，但頁面被重定向。

是的我確實有身份驗證的警衛，只有通過衛士訪問個人檔案頁面，所以只有經過身份驗證的用戶才能訪問他們的個人檔案頁面。

控制檯中沒有錯誤。調度事件成功執行並用新數據更新狀態。

我routing.ts看起來象下面這樣：

const appRoutes: Routes = [ 
    { path: '', component: HomepageComponent, }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'user/updateprofile', component: EditProfileComponent, canActivate: [AuthGuard] }, 
    { path: '**', redirectTo: 'pagenotfound' } 
]; 

構造（私有數據庫：數據庫，私有路由器：路由器，專用存儲$：商店，私人spinnerService：SpinnerService）{ this.spinnerService.show（ ）; }

verifyTheUser(): Observable<boolean> { 
    return this.db.query('user').map(user => user).take(1); 
} 

authGuard.ts

userUpdate的

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> { 
     return this.verifyTheUser().map(res => { 
      if (res != undefined && res != null && res['user'] != undefined && res['user'] != null) { 
       if (res['user'].uid != 0) { 
        this.isLoggedIn = true; 
       } else if (res['user'].uid == 0) { 
        this.isLoggedIn = false; 
       } 
      } 
      console.log(this.isLoggedIn); 

      return this.isLoggedIn; 
     }); 

    } 

效果

userUpdate$ = this.actions$ 
      .ofType(AuthActions.USER_UPDATE) 
      .map((action: AuthActions.userUpdate) => action.payload) 
      .mergeMap(response => this.authService.retrieveLoggedUser(response.uid, response.token) 
       .map(res => { 
        var resObj = { user: {user: res, id: response.id } }; 
        return resObj; 
       }).switchMap(response => 
        this.db.insert('user', [response.user]) 
         .map(() => new UserActions.loadUserUpdate(response.user)) 
       ) 
       .catch((error: any) => { 
        return of(new UserActions.loadUserFailure(error)); 
       }) 
      ); 

我使用節約拿到變化檢測，以反映它在屏幕上觀察，是因爲觀察者的代碼我重定向？ this.profileObserver.next（數據）;

profilecomponent.ts

UpdateTheProfileInfo(requestData) { 
    this.loading = true; 
    this.auth.updateInfo(requestData, this.uid).subscribe(() => { 
this.UpdateTheUser(); 
    }, error => { 
console.log(error); 
    }); 
    } 

    UpdateTheUser() { 
    if (this.uid != undefined && this.uid != null && this.keyID != undefined && this.keyID != null) { 
     this.store$.dispatch(new AuthActions.userUpdate({ uid: this.uid, token: this.token, id: this.keyID })); 
    } 

Answer 1

所以在您與按鈕式submit形式登錄的意見。

因此，你必須使用(submit)處理表單和你的方法得到由submit呼籲綁定 - 事件處理圖謀使用event.preventDefault()防止默認行爲。