Блог

У меня странная ситуация в моем приложении Angular, и я ищу предложения о том, как ее решить. У меня есть две страницы, между которыми я перемещаюсь. Каждая страница является компонентом, и каждая страница содержит набор перечислений:

страница-1.компонент.ts

 export class Page1Component {
    ...
}

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

страница-2.компонент.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
}
 

…and I can add extra ones like this:

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

Now to my problem. After adding the extra enums to myEnums on page 1, I navigate to page 2 (where I do the same thing to the myEnums on that page) then return to page 1. I find that after adding the extra enums again, it adds them in addition to the extra enums I added on the first visit. So it ends up looking like this:

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

(it knows how to create the enum numbers dynamically.)

This tells me the enums are cached even when navigating away from the page. Even though the page component is destroyed when I leave, the enum isn’t. So when I return to the page, the extra enums I add just get piled up on top of the enums that were added the first time. I don’t want to check how many enums there are before adding extra ones, because the enums may change frequently as we develop the project, and to have to maintain a hard coded number to keep track of the number of enums is asking trouble.

So I’m wondering if there’s something I can do in ngOnDestroy of page 1 to reset the enums to the original set, or destroy it all together, forcing it to recreate them from scratch the next time I visit page 1. Since the enums are scoped to the page, I should be able to reset or destroy them without affecting the enums on the other page. Does anyone have any suggestions? Thanks.