1

我是 ngrx 的新手，我在退订时遇到问题。我正在使用最新版本的 Angular 和 ngrx。

我有 CreateState 和 ModelState。在对话中创建 CreateState 后，我想将 CreateState 复制为 ModelState 的一部分，然后清除 CreateState 使对话变为空。

为此，我首先接收 CreateState 的整个状态，然后调用 ModelState 的 Action 进行复制。

this.store$.select(CreateSelectors.selectCreateState).subscribe((state: CreateState.State) => {
  this.store$.dispatch(new ModelActions.CreateAction(state));
  this.router.navigateByUrl('/canvas');
});

移至新页面后，我正在调用 CreateState 上的操作以进行清除。

ngOnInit() {
    this.store$.dispatch(new CreateActions.ClearAction());
}

但似乎我的第一页中的 Select Subscription 仍在侦听，因此清除 CreateState 会触发 select 并再次调度 ModelActions.CreateAction。

我尝试只收听Observable 或取消订阅 Observable 但 Typescript 说or.first()没有功能。.first().unsubscribe()

我有什么问题吗？我应该使用不同的方法来移动和清除状态吗？

4

2 回答 2

3

您应该通过管道运行代码，在那里您可以使用 first() 运算符。

this.store$.select(CreateSelectors.selectCreateState).pipe(
first(), // should unsubscribe after first iteration
tap( (state: CreateState) => {
      this.store$.dispatch(new ModelActions.CreateAction(state));
      this.router.navigateByUrl('/canvas');
})
).subscribe();

或者您可以设置一个变量并订阅它。

const subscription = this.store$.select(CreateSelectors.selectCreateState).pipe(
tap( (state: CreateState) => {
      this.store$.dispatch(new ModelActions.CreateAction(state));
      this.router.navigateByUrl('/canvas');
})
);

// if you don't subscribe nothing will happen
// unsubscribes after first iteration
subscription.first().subscribe();

一些文档：

first()的现场演示

first()文档 RxJS 文档 learn-rxjs

于 2018-10-09T13:07:58.110 回答
0

您订阅从 select 函数返回的 observable。您需要将该 observable 存储在一个变量中，以便您可以引用它。

然后您可以使用该变量取消订阅

于 2018-10-09T12:15:27.257 回答