Question

所以在这里我使用复选框来隐藏和显示模板。我只想要在 angular 9 页面刷新后使复选框保持选中状态的代码。请帮助我。

Answer 1

你可以做两件事：

使用 RxJS，一旦选中该复选框，您就可以使用行为主题来存储数据，并在重新加载或刷新事件时读取行为主题并修补值
使用 sessionStorage，并执行相同的操作。选中后，将其存储在 sessionStorage 中，重新加载时，尝试从 sessionStorage 读取并再次修补该值。

实施：

// Using session storage

someForm.controls.checkboxFormControl.valueChanges.subscribe(
  data => {
    if (data) {
        sessionStorage.setItem('checkboxChecked', true)
    }
})

onRefreshEvent() {
 let sessionStorageValue = sessionStorage.setItem('checkboxChecked'); 
 if (sessionStorageValue && (sessionStorageValue === true)) {
    this.someForm.contols.checkBoxControl.patchValue(true)
 }
}


//// Same with Behavior Subject as well

// Create a Behavior Subject in your Service file
checkboxCheckedSource: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
checkBoxObservable: Observable<boolean> = this.checkboxCheckedSource.asObservable();

setCheckboxValue(checked: boolean) {
  this.checkboxCheckedSource.next(checked);
}

getCheckboxValue(): Observable<boolean> {
  return checkBoxObservable;
}

// In your component.ts file

someForm.controls.checkboxFormControl.valueChanges.subscribe(
  data => {
    if (data) {
        this.yourService.setCheckboxValue(true)
    }
})

onRefreshEvent() {
  this.yourService.getCheckboxValue().subscribe(checked => {
    if (checked) {
       this.someForm.contols.checkBoxControl.patchValue(true);
    }
  })
}

如果它只有一个复选框，我更喜欢使用 sessionStorage 的方式，否则如果您要存储很多复选框，请使用 BehaviorSubject！！

刷新页面刷新后，复选框应保持选中状态

1 个答案: