使用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()防止默认行为。