Изменение значения хранилища сессии на неопределенное должно повлиять на ngIf без двойного нажатия

Question

StackBlitz

Когда я нажимаю кнопку (которая должна сделать сохраненную переменную сеанса неопределенной, чтобы в другом компоненте ngIf становился ложным, а div больше не отображался), он неработать в первый раз.Но когда я нажимаю снова, он работает, и этот div становится скрытым.

Вот мой подход.

Первый компонент (сначала отображается этот компонент, и сначала я нажимаю кнопку, а затем - второй компонент).:

//TS part
@SessionStorage() count: any;

onClick(){
this.count = "Any value";
}

<!-- HTML part-->
<button *ngIf="!count" (click)="onClick()">Click</button>

Второй компонент:

//TS part
@SessionStorage() count: any;

onClick(){
this.count = undefined;
}

<!-- HTML part-->
<button *ngIf="count" (click)="onClick()">Click</button>

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

Answer 1

Похоже, что нам нужно использовать методы sessionStorageService set () для обновления переменной count.

this.sessionStorageService.set('count', "Any value");

, и вы можете использовать эту переменную в других компонентах, как показано ниже

private count; 
this.count = this.sessionStorageService.get('count');

or   @SessionStorage() count: any;

https://angular -3izdz8.stackblitz.io

Answer 2

Это происходит потому, что во втором компоненте count изначально не определено, а затем, когда вы щелкнете, установит его значение на неопределенное, не вызывая изменений.

Если это так, убедитесь, что вы инициализируете его значение текущим счетчиком:

constructor(private sessionStorageService: SessionStorageService) {
  this.count = this.sessionStorageService.get('count');
}

Вот демонстрация: https://stackblitz.com/edit/angular-puzknw?file=src/app/two/two.component.ts

Это должно сработать, но вы должнывероятно, используйте для этого сервис и добавьте его в каждый компонент.