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

Question

我的问题与我的 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;
}
}

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

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

Answer 1

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

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

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

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