Angular 如何阻止rxjs中可观察到的共享

我想停止observable，它是由share操作符创建的

我的服务：

private timer = interval(1000).pipe(take(60), share());
private timerStarted = false;

startTimer() {
  this.timer.pipe(
    tap(() => this.timerStarted = true),
    finalize(() => this.timerStarted = false)
  ).subscribe();
}

getTimer() {
  return this.timer;
}

getTimerStarted() {
  return this.timerStarted;
}

我的组成部分：

private destroy$ = new Subject<boolean>();

ngOnInit() {
  if (this.timerService.getTimerStarted()) {
    this.timerService.getTimer().pipe(
      takeUntil(this.destroy$),
    ).subscribe();
  }
}

onStartTimer() {
  this.timerService.startTimer();
  this.timerService.getTimer().pipe(
    takeUntil(this.destroy$),

  ).subscribe();
}

ngOnDestroy() {
  this.destroy$.next(true);
}

并在Ngondestory中使用：

ngOnDestroy() {
  this.destroy$.next(true);
  this.timerService.stopTimer();
}

---

我希望停止在后台创建值。

调用有关取消订阅主题的

complete

方法。然后，当

ngondestory

生命周期调用时，应自动销毁可观察对象

ngOnDestroy() { this.destroy$.next(true);       this.destroy$.complete();}

编辑：

对于

计时器

订阅，将其存储为服务中的属性

this.subscription = <your observable>. subscribe()

stopTimer(){ this.subscription.unsubsribe();}

this.subscription=。订阅（）
stopTimer（）{this.subscription.unsubscripte（）；}

---

然后在

onDestroy

中，您可以调用

stopTimer

方法。

您不需要在服务中创建订阅，不清楚您为什么要这样做。share（）在没有订户时自然终止，但在服务中，您要确保始终存在一个订户。只需这样做：

export class TimerService {
  timer$ = interval(1000).pipe(
             take(60), 
             tap(() => this.timerStarted = true), 
             finalize(() => this.timerStarted = false),
             share());
  private timerStarted = false;

  getTimerStarted() {
    return this.timerStarted;
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [TimerService]
})
export class AppComponent  {
  name = 'Angular';

  sub;
  constructor(private timer: TimerService) {
    this.sub = this.timer.timer$.subscribe(v => console.log(v));
    setTimeout(() => this.sub.unsubscribe(), 4000)
  }
}

在日志中，您将看到计时器发出4次，然后在超时取消订阅后停止。您可以很容易地在OnDestroyHook中取消订阅，或者使用destroy$emission方法。两者的效果相同

闪电战：

根据评论进行编辑：

由于您确实希望在组件之间保持订阅活动，因此需要修改服务以允许您结束该订阅：

private timer = interval(1000).pipe(take(60), takeUntil(stopTimer$), share());
private timerStarted = false;
private stopTimer$ = new Subject();

startTimer() {
  this.timer.pipe(
    tap(() => this.timerStarted = true),
    finalize(() => this.timerStarted = false)
  ).subscribe();
}

stopTimer() {
  this.stopTimer$.next();
}

---

此方法将结束服务级别订阅和所有其他订阅，因为takeUntil本身是计时器管道的一部分。

谢谢，但我们可以在ngOnInit方法上返回到组件后重新连接到流？我想使用共享运算符，因为我想启动计时器。更改组件（在同一个模块上），返回，并在实际位置查看计时器-我的意思是，“在后台”仍将计算值。太棒了！我将takeUntil添加到服务observable，现在可以正常工作了！非常感谢。

private timer = interval(1000).pipe(take(60), takeUntil(stopTimer$), share());
private timerStarted = false;
private stopTimer$ = new Subject();

startTimer() {
  this.timer.pipe(
    tap(() => this.timerStarted = true),
    finalize(() => this.timerStarted = false)
  ).subscribe();
}

stopTimer() {
  this.stopTimer$.next();
}