Как сохранить значение в селекте?

Question

[Alex10214]

Приветствую, у меня такая проблема. Я выбираю значение в селекте, но как только перехожу на другую страничку в приложении, то у меня сбрасывается значение в селекте. Подскажите как мне его там оставить и не сбрасывать при переходе на другие странички. Вот мой селект:

<mat-form-field class="for-select" appearance="outline">
            <mat-label>Select account</mat-label>
            <mat-select [(ngModel)]="activeUserAccount" (ngModelChange)="changeActiveUserAccount()">
              <mat-option>None</mat-option>
              <mat-option [value]="activeUserAccount" *ngFor="let activeUserAccount of userAccounts">
                {{activeUserAccount.name}}
              </mat-option>
            </mat-select>
          </mat-form-field>

Answer 1

[Gennady S]

Можно предположить, что пользуетесь маршрутизатором, раз речь о переходе на другую страницу. Состояние компонентов при переходе сбрасывается, т.е. все вложенные в router-outlet компоненты инициализируются заново. Было бы сложнее и хуже, будь иначе. У Вас два пути. Во-первых, сохранить состояние компонента тем или иным образом. Во-вторых, пересмотреть подход к архитектуре приложения.

Вы можете отправить данные вверх, в родительский компонент, использовать глобальное хранилище, сервис или дать возможность пользователю сохранить данные на сервер. Что логично, когда страница отвечает за свой набор данных и при переходе на другую страницу речь идет о другом наборе данных. Если у Вас ряд страниц отвечают за связанные данные, можно исключить переход между страницами, сделать вкладки-табуляцию, например.

По моему опыту, усложнять не стоит. Постарайтесь сделать так, чтобы страница отвечала за набор данных и при переходе состояние сохранялось как состояние страницы, т.е., чтобы при нажатии F5 данные были восстановлены (и утеряны, если пользователь их не сохранил). Воспринимайте состояние страницы как такое состояние, которое должно быть возобновлено после закрытия браузера / приложения. Если несколько разделов отвечают за связанный набор данных, то данные должны храниться в родительском компоненте, а переключение компонент не должно быть переходом между страницами.

Comments

[Alex10214]

Большое спасибо!