时间戳

首页 > 解决方案 > 几个不同浏览器选项卡中的 Angular 和 TypeScript/javascript 单例

javascript - 几个不同浏览器选项卡中的 Angular 和 TypeScript/javascript 单例

问题描述

我的问题与我的 Angular 应用程序中的 TypeScript 单例类（用作对象的 MVC 模型类型）到浏览器中的一个选项卡中是否相同或不同的对象有关，然后将相同的单例加载到同一浏览器实例中的另一个选项卡中.

实现看起来有点像这样（类似的想法可以用 JS 编写）： 

[TypeScript]
class Budget {
    readonly name : string;

    private static instance: Budget;
    static getInstance(name? : string) {
        if (!this.instance) {
            name = name ? name : "no name";
            this.instance = new Budget(name);
        }
        return this.instance;
    }
    private constructor(name : string) {
      this.name = name;
    }
 }

在我的应用程序中，顶级“预算”对象被编写为单例，以方便访问各种数据项、类实例等。预算对象由大约 40 个需要相互访问的其他组件类组成，而预算对象为每个类实例提供访问它需要的其他实例的方法。单例架构允许我编写类似 Budget.getInstance().getAccount("foo") 的代码，而不是在所有这些子类中维护对 Budget 实例的引用。事实证明，这让我更容易写作。

我的问题是，使用这种架构，用户是否可以在浏览器（比如 Chrome）的不同选项卡中打开两个不同的预算，它们引用具有不同名称的不同预算对象实例。（单例实例由 Rails 后端填充数据，具体取决于用户想要编辑的预算。）我可以想象，用户在浏览器中同时引用两个不同的预算会有用，其中每个在不同的选项卡中。但是，如果在所有浏览器选项卡中实际上只有一个 Budget 对象可访问，则这是不可能的。

标签： javascriptangulartypescript

解决方案

如果从第一个选项卡中打开第二个选项卡，您可以在选项卡之间共享 JavaScript 对象window.open()。此函数返回window打开的选项卡的对象。

尽管没有内置的 Angular 方法可以做到这一点，但您可以使用本机 JavaScript 自己尝试：

  • 打开浏览器的控制台，然后输入const secondTab = window.open('', '_blank');
  • 在第一个选项卡上创建一个对象：const obj = {};
  • 将其分配给第二个选项卡secondTab.obj = obj;
  • 在第二个选项卡中，键入obj.prop = 'test';
  • 在第一个选项卡中，键入obj，您会注意到它已被第二个选项卡修改

如果您的问题是关于独立打开的选项卡，恐怕这是不可能的。

推荐阅读