如何在Angularjs2

Question

我在Angularjs2应用程序中设置了一个时间间隔，如下所示。注销时我需要停止此操作，因为在注销后我也可以看到我的预加载器工作，这意味着仍然会调用函数（UpdateTransactions）。

transaction.component.ts

ngOnInit() {
    let timer = Observable.timer(45000,40000);
    timer.subscribe(t=> {
        this.UpdateTransactions();
    });
}

login.component.ts

logout(){
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    localStorage.removeItem("paydid");
}

退出时如何停止此计时器。帮助赞赏。谢谢！

修改

import { Component, OnInit, OnDestroy } from '@angular/core';
import {TransactionService} from '../services/transaction.service';
import { HttpClient } from '../providers/http-client';
import {Transaction} from '../models/transaction';
import { Router } from '@angular/router';
import {Observable} from 'rxjs/Rx';
import {mynum_directives} from '../common/mynum_directives';

@Component({
  selector: 'app-transaction',
  templateUrl: './transaction.component.html',
  styleUrls: ['./transaction.component.css'],
})
export class TransactionComponent implements OnInit, OnDestroy {

private transactions:any;
public errorMsg = 'Transactions update request sent successfully!';
public timer;

  constructor(private _service:TransactionService, private _router: Router )    { 
  }

  ngOnInit() {
    this.timer = Observable.timer(45000,40000);
    this.timer.subscribe(t=> {
    this.UpdateTransactions();
  });
 }

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

 UpdateTransactions(){
   ////some stuff
 }

}

Answer 1

如果符合您的需要，您可以在ngOnDestroy()停止计时器。

哦，我会使用某种全球事件调解员：

1. 使用transaction.component.ts中的计时器参考启动计时器启动

2. 在login.component.ts中订阅此活动并收到 参考

3. 在logout()
中停止计时器

ngOnDestroy() - 是一个生命周期钩子。它与您已经使用的ngOnInit()相同，但在组件卸载时调用。因此，当不再需要你的组件时，它会被Angular破坏。 换句话说，在您的transaction.component.ts中：

1. 实施OnDestroy

   class TransactionComponent implements OnInit, OnDestroy {}
   

2. 制作类属性subscribtion

     ngOnInit() {
       let timer = Observable.timer(45000,40000);
       this.subscribtion= timer.subscribe(t=> {
       this.UpdateTransactions();
     });
   

3. 创建ngOnDestory()方法

4. 在该方法中停止计时器

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

Answer 2

您必须创建一个包含订阅类型的变量来保存您的订阅，将代码更改为：

import {Subscription} from 'rxjs';

sub: Subscription; 
ngOnInit() {
    let timer = Observable.timer(45000,40000);
    this.sub = timer.subscribe(t=> {
        this.UpdateTransactions();
    });
}

logout(){
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    localStorage.removeItem("paydid");
    this.sub.unsubscribe();
}`

此作业允许您取消订阅可观察的内容。

Answer 3

尝试退出时取消订阅。

logout(){
    localStorage.removeItem("token");
    localStorage.removeItem("user");
    localStorage.removeItem("paydid");
    timer.unsubscribe()
    });
}

考虑为用户登录/注销操作创建共享服务，然后您就可以访问您的订阅。你以某种方式传播登录状态登录事件吧？