如何在Angular 2单例中制作组件?

the*_*man 7 singleton angular2-components angular

我正在使用Angular 2来构建我的Web应用程序,其中包含许多组件.我正在使用angular-cli来创建,运行和构建项目.
偶然(或幸运)我偶然发现了一个错误,我意识到我的组件的多个实例正在创建.更糟糕的是当我意识到我的代码是随机引用任何一个这样的实例而没有任何逻辑来追溯它.

例如,请检查以下方案:

  • 我登录了我的应用程序并在特定组件中进行了REST调用(在窗口调整大小事件上)
  • 这里重要的一点是每个用户都有一个在REST调用中使用的唯一ID
  • 然后我从该用户注销并使用其他用户登录
  • 我回到相同的组件并进行了相同的休息调用(再次对窗口调整大小事件),但令我震惊的是,其余一些调用是使用唯一ID或更早登录的用户进行的
  • 为了检查我的怀疑,我在构造函数中创建了一个第一个类变量,它基本上存储了值.这将转向告诉我何时实例化类.Date.now()
  • 然后我添加了一些console.log()语句,告诉我哪个实例是由我的变量的值调用的.
  • 日志证实了我怀疑多个实例确实同时存在,并且没有一定的逻辑或路径可以访问其中任何一个. 这是我的日志声明的图像. 我已经把敏感部分搞砸了.

这是我的日志声明的图像.我已经把敏感部分搞砸了.可以清楚地看到,一些休息呼叫正在使用租户1的唯一ID,而一些用于试用租户.从两个实例时间也可以非常清楚地使用两个实例.以前登录的租户的旧实例在某种程度上仍在使用中,我的组件仍然可以访问它.

我的问题是:

  1. 有没有办法让组件类单例化?
  2. 有没有办法在离开组件时销毁组件实例?

bre*_*per 2

  1. 有没有办法让组件类单例化?

我不知道

  1. 有没有办法在离开组件时销毁组件实例?

是的,有一个界面OnDestroy

export class ClockComponent implements OnDestroy {
interval;

ngOnDestroy() {
  clearInterval(this.interval);
}

constructor() {
  this.interval = setInterval( ()=> console.log('tick') );
}
Run Code Online (Sandbox Code Playgroud)