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

Question

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

例如，请检查以下方案：

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

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

我的问题是：

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

Answer 1

  

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

不是我知道

  

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

是的，有一个界面OnDestroy

export class ClockComponent implements OnDestroy {
interval;

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

constructor() {
  this.interval = setInterval( ()=> console.log('tick') );
}

Answer 2

当我添加定义一个选项卡时，我遇到了同样的问题。每次选择一个选项卡时，它都会创建组件而不是使用上一个创建的组件。 我的解决方案适用于简单的组件，但我不确定该解决方案是否正确，但正如我在简单组件中所说的那样，它是否对我有用。

这是我只想拥有一个组件的代码-如单例

import { Component, OnInit, OnDestroy } from '@angular/core';

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

  static lastComp: Main1Component;

  constructor() {
    if (Main1Component.lastComp) {
      return Main1Component.lastComp;
    }
   }


  name: string;
  ngOnInit(): void {
    if (!Main1Component.lastComp) {
      this.name = 'Zion';
    }
  }

  ngOnDestroy(): void {
    Main1Component.lastComp = this;
  }
}

我将最后创建的组件保留在一个静态成员中，并且在构造函数中（如果存在静态的话）我使用它而不是创建一个。 我只做一次OnInit！ 在“销毁”中，我将最后一个保留在静态成员中。

我希望它能对某人有所帮助，很高兴对此发表任何评论。

Answer 3

好吧，我可以确定是否需要将组件作为单例，因为服务不能包含html，有时您需要将html关联为单例实例的一部分。但实际上您可以使组件成为单例：

private static _counter = 0;
static CountInstances() : Boolean {
  ++SingletonComponent._counter;
  if(SingletonComponent._counter > 1){
    return false;
  }
  return true;
}

if(!SingletonComponent.CountInsances()) //throw error and stop app from running