Angular 如何在角坐标系中使用同步管道时手动停止观察者

让我们编写一个简单的示例，每1秒递增一次，然后用户

| sync

更新模板：

@Component({
  selector: 'my-counter',
  templateUrl: '
      </div> {{time | async}}</div>
      <button (click)="stop()"> stop counter</button>'
  })
export class AppComponent implements OnInit {
  counter: Observable<any>;

  ngOnInit() {
    this.counter = interval(1000).pipe(
      map(i => `Result ${i}`)
    );
  }

  stop() {
    this.counter.unsubscribe(); // error. no such thing unsubscribe()
  }

  activate() {
   this.counter /// ??? 
  }
}

@组件({
选择器：“我的计数器”，
templateUrl:'
{{time}异步}
停止计数器'
})
导出类AppComponent实现OnInit{
计数器：可观察；
恩戈尼尼特（）{
this.counter=间隔（1000）.管道(
映射（i=>`Result${i}`）
);
}
停止（）{
this.counter.unsubscribe（）；//错误。没有这样的东西unsubscribe（）
}
激活（）{
这个.计数器//？？？
}
}

但是现在模板使用

unsubscribe

方法获得了

Subscription

值的处理程序

那么我怎样才能阻止柜台

---

在我停止后，有办法再次激活它吗

您可以使用

takeUntil

操作符，它将监听第二个

可观察到的
，并在听到事件时取消订阅。例如，在下面的代码中，我们创建了一个名为
stop$
的
主题。只要我们在
stop$
上发出一个值，我们的订阅就结束了

import { Component } from '@angular/core';
import { map, takeUntil } from 'rxjs/operators';
import { Observable, Subject, interval } from 'rxjs'

@Component({
  selector: 'my-app',
  template: `
      <div> {{counter | async}}</div>
      <button (click)="stop()"> stop counter</button>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  counter: Observable<any>;
  private stop$ = new Subject<void>();

  ngOnInit() {
    this.counter = interval(1000).pipe(
      map(i => `Result ${i}`),
      takeUntil(this.stop$)
    );
  }

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

从'@angular/core'导入{Component}；
从“rxjs/operators”导入{map，takeUntil}；
从“rxjs”导入{可观察，主题，间隔}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{计数器|异步}}
停止计数器`，
样式URL:['./app.component.css']
})
导出类AppComponent{
计数器：Observable
您可以使用
takeUntil
操作符，它将监听第二个
Observable
，并在听到事件时取消订阅。例如，在下面的代码中，我们创建一个名为
停止$
的
主题。一旦我们在
停止$
上发出一个值，我们的订阅结束

import { Component } from '@angular/core';
import { map, takeUntil } from 'rxjs/operators';
import { Observable, Subject, interval } from 'rxjs'

@Component({
  selector: 'my-app',
  template: `
      <div> {{counter | async}}</div>
      <button (click)="stop()"> stop counter</button>`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  counter: Observable<any>;
  private stop$ = new Subject<void>();

  ngOnInit() {
    this.counter = interval(1000).pipe(
      map(i => `Result ${i}`),
      takeUntil(this.stop$)
    );
  }

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

从'@angular/core'导入{Component}；
从“rxjs/operators”导入{map，takeUntil}；
从“rxjs”导入{可观察，主题，间隔}
@组成部分({
选择器：“我的应用程序”，
模板：`
{{计数器|异步}}
停止计数器`，
样式URL:['./app.component.css']
})
导出类AppComponent{
计数器：可观察的
在Rx中，当您订阅任何可观察的时，您将获得一次性订阅：
这是一个可观察对象的基本契约：

Observable<T>.subscribe(observer: Observer<T>) : Subscription

在Rx中，当您订阅任何可观察到的内容时，您将获得一次性订阅：
这是一个可观察对象的基本契约：

Observable<T>.subscribe(observer: Observer<T>) : Subscription

我尝试了不同的方法，而不是使用
观察者
使用
主题

  @Component({
    selector: 'my-counter',
    templateUrl: `
      </div> {{time | async}}</div>
      <button (click)="stop()"> stop counter</button>
    `
  })
  export class MyCounter implements OnInit {
    counter: Subject<any>;
    value = 0;

    ngOnInit() {
      this.counter = new Subject();
      setInterval(_ => {
        this.counter.next( this.value++ );
      },1000);
    }

    stop() {
      this.counter.unsubscribe(); // work now
    }

    activate() {
      this.counter /// ??? 
    }
  }

@组件({
选择器：“我的计数器”，
模板URL:`
{{time}异步}
停车柜台
`
})
导出类MyCounter实现OnInit{
柜台：主题；
数值=0；
恩戈尼尼特（）{
this.counter=新主题（）；
setInterval（Ux=>{
this.counter.next（this.value++）；
},1000);
}
停止（）{
this.counter.unsubscribe（）；//立即工作
}
激活（）{
这个.计数器//？？？
}
}
我尝试了不同的方法，而不是使用
观察者
使用
主题

  @Component({
    selector: 'my-counter',
    templateUrl: `
      </div> {{time | async}}</div>
      <button (click)="stop()"> stop counter</button>
    `
  })
  export class MyCounter implements OnInit {
    counter: Subject<any>;
    value = 0;

    ngOnInit() {
      this.counter = new Subject();
      setInterval(_ => {
        this.counter.next( this.value++ );
      },1000);
    }

    stop() {
      this.counter.unsubscribe(); // work now
    }

    activate() {
      this.counter /// ??? 
    }
  }

@组件({
选择器：“我的计数器”，
模板URL:`
{{time}异步}
停车柜台
`
})
导出类MyCounter实现OnInit{
柜台：主题；
数值=0；
恩戈尼尼特（）{
this.counter=新主题（）；
setInterval（Ux=>{
this.counter.next（this.value++）；
},1000);
}
停止（）{
this.counter.unsubscribe（）；//立即工作
}
激活（）{
这个.计数器//？？？
}
}
好的，在我关闭观察者后的这个用例中，如何再次激活它？一旦拆除，所有观察者都将分离-你必须让模板重新订阅。你想简单地制作一个可以随意启动/停止的计时器吗？好的，下面是如何创建一个随意启动和停止的计时器。这很难理解，但请看有趣。计时器是在停止->启动后重置自己，还是从上一个索引继续？我如何使它保持不变而不是每次重新启动？它确实从上一个索引重新启动。自己尝试一下。好的，在这个用例中，在我关闭观察者后，我如何再次激活它？一旦拆下，所有观察者都被分离-你必须重新启动让你的模板重新订阅。你只是想制作一个可以随意启动/停止的计时器吗？好吧，下面是如何创建一个可以随意启动和停止的计时器。这很难理解，但看起来很有趣。计时器是在停止->启动后自动重置还是从上一个索引继续重置？我如何使它保持不变而不是每次都重新启动t不会从上一个索引重新启动。请自己尝试。