0

我在我的 Angular 应用程序中有一个奇怪的情况，我正在寻找有关如何解决它的建议。我有两个页面可以在两个页面之间导航。每个页面都是一个组件，每个页面都有一组枚举：

page-1.component.ts

export class Page1Component {
    ...
}

enum myEnums {
    enum1,
    enum2,
    enum3,
    ...
}

page-2.component.ts

export class Page2Component {
    ...
}

enum myEnums {
    enumA,
    enumB,
    enumC
    ...
}

请注意，枚举是在每个组件类之外定义的，并且它们的名称相同。但是，它们不包含相同的枚举集。

我发现如果我从第 1 页导航到第 2 页并返回，枚举会根据我所在的页面重新定义。所以如果我console.log(myEnums)在第 1 页做，它会显示我enum1, enum2, enum3。如果我console.log(myEnums)在第 2 页这样做，它会显示我enumA, enumB, enumC。所以看起来枚举的范围是每个页面，因此在命名它们时没有冲突。

但是，每组枚举似乎都缓存在某处，这样当我离开页面并返回时，它不必为该页面重新创建枚举。我注意到这一点是因为我正在做一些需要在每个页面上动态修改枚举的事情。因此，如果这是第 1 页上的原始枚举集：

enum myEnums {
    enum1,
    enum2,
    enum3
}

...我从后端调用中获得了额外的值，并将它们插入到枚举中，最终结果如下：

enum myEnums {
    enum1,
    enum2,
    enum3,
    extraEnum1,
    extraEnum2,
    extraEnum3
}

我可以这样做是因为 Javascript 中的枚举只是对象：

{
    enum1: 0,
    enum2: 1,
    enum3: 2,
    0: enum1,
    1: enum2,
    2: enum3
}

...我可以像这样添加额外的：

myEnum['xxx'] = 3;
myEnum['3'] = 'xxx';

现在到我的问题。在第 1 页将额外的枚举添加到 myEnums 后，我导航到第 2 页（我在该页面上对 myEnums 执行相同的操作）然后返回第 1 页。我发现再次添加额外的枚举后，它会将它们添加到除了我在第一次访问时添加的额外枚举。所以它最终看起来像这样：

enum myEnums {
    enum1,
    enum2,
    enum3,
    extraEnum1,
    extraEnum2,
    extraEnum3,
    extraEnum4,
    extraEnum5,
    extraEnum6
}

（它知道如何动态创建枚举数。）

这告诉我，即使离开页面，枚举也会被缓存。即使页面组件在我离开时被破坏，枚举也不会。因此，当我返回该页面时，我添加的额外枚举只会堆积在第一次添加的枚举之上。我不想在添加额外的枚举之前检查有多少枚举，因为在我们开发项目时枚举可能会经常更改，并且必须维护一个硬编码的数字来跟踪枚举的数量是很麻烦的。

所以我想知道我是否可以在第 1 页的 ngOnDestroy 中做些什么来将枚举重置为原始集合，或者将它们全部销毁，从而在我下次访问第 1 页时强制它从头开始重新创建它们。因为枚举是在页面范围内，我应该能够在不影响其他页面上的枚举的情况下重置或销毁它们。有没有人有什么建议？谢谢。

4

0 回答 0