Question

我在这里有一个方法我从这里得到数据我希望每30秒刷新一次数据以前我使用setINTERVAL方法但是我可以使用Observable Interval，如果是这样我怎么能用这个becoz如果离开该页面，我想取消订阅该方法

下面是我获得结果的代码

getOrderTrack(data){
    this.serv.OrderTrackDetails(data).subscribe(res=>{

       this.OrderTrack = res.CurrentOrderStatusResult;
       console.log(this.OrderTrack);
     },err=>{
       console.log(err);
     })

Answer 1

在ngDestroy中使用取消订阅，取消订阅sunbscrition到可观察的

@Component({selector: 'my-cmp', template: `...`})
class MyComponent implements OnDestroy {
  private subscription: Subscription;
  this.subscription = // Observable code 
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Answer 2

如果可以，我可以使用Observable Interval吗？如果出去，我怎么能使用这个becoz？该页面我想取消订阅该方法

您可以取消订阅所需的位置。因此，如果您导航到另一个页面并且该组件将被销毁，则会调用 ngOnDestroy 生命周期钩子。

export class AppComponent {
  name: any = 'Angular 5';
  subscr: Subscription;

  constructor(public http: HttpClient) {

  }

  getData() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts/1');
  }

  ngOnInit() {

    this.subscr = Observable.interval(1000)
      .flatMap(() => this.getData())
      .subscribe(data => {
        console.log('data', data);
        this.name = data;
      });
  }

  unsubscribe() {
    this.subscr.unsubscribe();
  }

  ngOnDestroy() {
    this.subscr.unsubscribe();
  }

StackBlitz Demo

如何使用Angular4而不是Set interval来每30秒调用一次方法

2 个答案: