Angular应用返回编辑帖子页时如何清除成功/错误状态？

要实现返回编辑页面时清空之前的成功/错误状态消息，你可以借助NgRx的Action与Reducer机制，在页面加载时重置对应状态：

1. 添加重置消息的Action #

在PostsPageActions中新增一个用于清空更新消息的Action：

import { createAction } from '@ngrx/store';

// 其他已有Action...

export const clearUpdatePostMessages = createAction(
  '[Posts Page] Clear Update Post Messages'
);

2. 在Reducer中处理重置逻辑 #

找到管理更新帖子状态的Reducer（对应selectUpdatePostPageError和selectUpdateSuccessMsg的状态片段），添加对上述Action的处理，将错误与成功消息设为null：

import * as PostsPageActions from '../actions/posts-page.actions';

// 假设你的状态结构如下
interface UpdatePostState {
  pending: boolean;
  error: string | null;
  successMsg: string | null;
}

const initialState: UpdatePostState = {
  pending: false,
  error: null,
  successMsg: null
};

export function updatePostReducer(state = initialState, action: PostsPageActions.PostsPageActionsUnion): UpdatePostState {
  switch (action.type) {
    // 其他已有状态处理case...
    
    case PostsPageActions.clearUpdatePostMessages.type:
      return {
        ...state,
        error: null,
        successMsg: null
      };
    
    default:
      return state;
  }
}

3. 在页面初始化时触发重置Action #

修改EditPostPageComponent的ngOnInit方法，在组件初始化（用户返回页面时）分发这个重置Action：

ngOnInit(): void {
  this.store.dispatch(PostsPageActions.clearUpdatePostMessages());
}

特殊场景处理（路由复用策略） #

如果你的应用启用了路由复用策略（组件实例不会被销毁重建），可以通过监听路由事件触发重置：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

// ...

constructor(private store: Store, private router: Router) {}

ngOnInit(): void {
  this.router.events
    .pipe(filter(event => event instanceof NavigationEnd))
    .subscribe(() => {
      this.store.dispatch(PostsPageActions.clearUpdatePostMessages());
    });
}

这样每次导航到该页面时，都会自动清空之前的状态消息，确保用户看到最新的帖子内容与干净的提示区域。

内容的提问来源于stack exchange，提问作者orangecheese