将会话存储值更改为未定义应该会影响 ngIf 而无需单击两次

Question

当我单击按钮时（这应该使会话存储变量未定义，以便在其他组件中 ngIf 应该变为 false 并且 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

发生这种情况是因为在第二个组件中 count 最初是未定义的，然后一旦您单击，它将其值设置为未定义，导致没有变化。

如果是这样，请确保使用当前计数初始化它的值：

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

这是一个演示：https://stackblitz.com/edit/angular-puzknw?file=src/app/two/two.component.ts

这应该可以解决问题，但您可能应该为此使用一个服务，并将其注入每个组件。

Answer 2

看来我们需要使用 sessionStorageService set() 方法来更新计数变量。

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

您可以在其他组件中使用该变量，如下所示

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

or   @SessionStorage() count: any;

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

将会话存储值更改为未定义应该会影响 ngIf 而无需单击两次

Changing session storage value to undefined should affect ngIf without clicking twice

javascript

session-storage

angular-ng-if

angular