我try 在创建记录时通知用户操作的成功或失败

为此,我准备了以下内容:

Post.actions.ts

export const PostActions = createActionGroup({
  source: 'Create post component',
  events: {
    'Create post': props<{ payload: CreatePostModel }>(),
    'Successful post creation': emptyProps(),
    'Failed post creation': props<{ payload: any }>(),
  },
});

Post.effects.ts

@Injectable()
export class ContentEffects {
  addContent$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PostActions.createPost),
      exhaustMap((action) =>
        this.postService.save(action.payload).pipe(
          map(
            (payload) => PostActions.successfulPostCreation(),
            catchError((error) =>
              of(PostActions.failedPostCreation({ payload: error }))
            )
          )
        )
      )
    )
  );

  constructor(
    private readonly postService: PostService,
    private readonly actions$: Actions
  ) {}
}

Post.reducer.ts

export interface PostState {
  success: string;
  error: any;
}

export const initialState: PostState = { success: '', error: undefined };

export const postReducer = createReducer(
  initialState,
  on(PostActions.successfulPostCreation, (state) => ({
    ...state,
    success: 'shared.success',
    error: undefined,
  })),
  on(PostActions.failedPostCreation, (state, { payload }) => ({
    ...state,
    success: '',
    error: payload,
  }))
);

Post.selectors.ts

export const selectSuccess = createFeatureSelector<string>('success');
export const selectError = createFeatureSelector<any>('error');

Create-post.component.ts

@Component({
  selector: 'app-post-create',
  templateUrl: './post-create.component.html',
  styleUrls: ['./post-create.component.scss'],
})
export class PostCreateComponent implements OnInit {
  @ViewChild('form', { static: false }) form: NgForm;

  success$: Observable<string>;
  error$: Observable<any>;

  constructor(
    private readonly notificationService: NotificationService,
    private readonly store: Store)
  {
    this.success$ = this.store.select(selectSuccess);
    this.error$ = this.store.select(selectError);
  }

  ngOnInit(): void {
    this.success$.subscribe({
      next: (value) => {
        this.form.resetForm();
        this.formGroup.reset();

        this.notificationService.success(value);
      },
    });
    this.error$.subscribe({
      next: (value) => this.notificationService.error(value),
    });
  }

  submit() {
    const model { ... }

    this.store.dispatch(PostActions.createPost({ payload: model }));
  }
}

流程是否成功,我可以验证记录是否已创建,我还可以确认状态的Success属性是否已创建,但不会显示成功通知消息.调试中,我成功地验证了订阅从未被调用

我希望在成功完成这一进程后调用它.

    this.success$.subscribe({
      next: (value) => {
        this.form.resetForm();
        this.formGroup.reset();

        this.notificationService.success(value);
      },
    });

没有调用订阅的原因是什么?

提前谢谢你

推荐答案

createFeatureSelector用于返回top级的特征状态,例如,整个PostState片,您使用它来监听PostState的特定属性,为此,只需使用基于特征1的简单 Select 器,例如:

export const selectFeature = createFeatureSelector<PostState>('post-feature');

export const selectSuccess = createSelector(selectFeature, (state) => state.success) 

关于 Select 器的更多信息here

Angular相关问答推荐

iOS Mobile Safari - HTML5视频覆盖一切

Angular路由不响应子路由的子路由

Angular 服务错误处理响应类型=BLOB

身份验证卫士给了我17个Angular 的任何类型

带逻辑的组件decorator 中的Angular 主机侦听器属性

首期日历发行

Rxjs重置执行后的可观察延迟并重新调度Angular

如何使用formBuilder.Group()从角形表单中删除选定的选项?

Angular 应用程序未在Azure应用程序服务中运行

如何将 Angular 中的导航路由到同一页面并重新加载

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

Angular,数据显示在控制台但不在应用程序中

升级到 Webpack 5.79.0 后 NX Angular 项目构建失败

http 调用的 RxJs 数组

Angular 测试被认为是成功的,即使有错误

Storybook 和 Angular 交互游戏测试未定义预期

Renderer2.appendChild 没有按预期工作?

带有 Angular 2 的 Django

Electron - 不允许加载本地资源

Angular Material 模态对话框周围的空白