保存垫子滑动切换的切换状态

Question

我在 aproject 中使用滑动切换。但是我无法保存切换状态。每次刷新页面时，滑动切换都会返回到默认状态而不是保持切换状态。我是 angular 的新手并且不不知道该怎么办。请帮忙。提前致谢。

这是ts代码：

export class ToggleComponent implements OnInit {
  @Output()
  change: EventEmitter<MatSlideToggleChange> ;
  @Input()
checked: Boolean 
  ngOnInit() {
  }
  isChecked = true;
  formGroup: FormGroup;
  filteringSchedule: boolean ;
  toggle:Boolean;

  constructor(formBuilder: FormBuilder) {
    this.formGroup = formBuilder.group({
      enableWifi: false,
      acceptTerms: [false, Validators.requiredTrue]
    });
  }

  onFormSubmit(formValue: any) {
    alert(JSON.stringify(formValue, null, 2));
  }

  onChange(ob: MatSlideToggleChange) {
    this.filteringSchedule=!this.filteringSchedule;
    console.log(!this.filteringSchedule);
  } 
}

模板代码：

<form class="example-form" [formGroup]="formGroup" (ngSubmit)="onFormSubmit(formGroup.value)" ngNativeValidate>
  <mat-action-list>
    <mat-list-item > <mat-slide-toggle  (change)="onChange($event)"  [checked]="filteringSchedule"  formControlName="enableWifi" >Enable Wifi</mat-slide-toggle></mat-list-item> 
    <mat-list-item > <mat-slide-toggle formControlName="acceptTerms">Accept Terms of Service</mat-slide-toggle></mat-list-item>
</mat-action-list>
  <p>Form Group Status: {{ formGroup.status}}</p>

  <button mat-rasied-button type="submit">Save Settings</button>
</form>

Answer 1

将您的切换属性存储在localStorage ，然后您可以在ngOnInit方法上检索localStorage值。

您甚至可以根据需要使用sessionStorage 。 localStorage和sessionStorage使用几乎完全相同，您只需将一个替换为另一个。

onChange(ob: MatSlideToggleChange) {
  this.filteringSchedule = !this.filteringSchedule;
  localStorage.setItem('yourKey', JSON.stringify(this.filteringSchedule));
}

ngOnInit() {
  this.filteringSchedule = localStorage.getItem('yourKey') == 'true';
}

Answer 2

Web 存储可用于保留切换按钮的状态（切换按钮在页面刷新时不会更改）。

在这里，我使用您为应用程序提供的代码制作了一个工作 Stackblitz 演示。 我已经使用本地存储来实现所需的功能。

您的 ToggleComponent 更新如下：-

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';
import { MatSlideToggleChange } from '@angular/material';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-toggle',
  templateUrl: './toggle.component.html',
  styleUrls: ['./toggle.component.css']
})
export class ToggleComponent implements OnInit {
  @Output() change: EventEmitter<MatSlideToggleChange>;
  @Input() checked: boolean;

  isChecked = true;
  formGroup: FormGroup;
  filteringSchedule: boolean;
  toggle: boolean;

  constructor(
    private formBuilder: FormBuilder
  ) { }

  ngOnInit() {
    this.filteringSchedule = JSON.parse(localStorage.getItem('toggleButtonState'));
    this.formGroup = this.formBuilder.group({
      enableWifi: this.filteringSchedule,
      acceptTerms: [false, Validators.requiredTrue]
    });
  }

  onFormSubmit(formValue: any) {
    alert(JSON.stringify(formValue, null, 2));
  }

  onChange(ob: MatSlideToggleChange) {
    this.filteringSchedule = !this.filteringSchedule;
    localStorage.setItem('toggleButtonState', JSON.stringify(this.filteringSchedule));
  }
}

另请注意：-除了（或代替）将按钮的切换状态存储在 cookie/本地存储中之外，为了使所有浏览器的用户保持一致，您可以将其存储在服务器端，并在加载站点时获取有关切换按钮的信息来自服务器的状态。

在旁注表单构建器代码中，您放置在构造函数中的应保留在ngOnInit ，以避免应用程序出现性能问题。

希望这是有帮助的。