Question

我在一个项目中使用幻灯片切换。但是，我不愿意保存切换的位置。每次刷新页面时，幻灯片切换都返回默认状态，而不是保持切换状态。棱角分明，不知道该怎么办。请提供帮助。谢谢。

这是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中，然后可以通过localStorage方法检索ngOnInit的值。

您甚至可以根据需要使用sessionStorage。 localStorage和sessionStorage的用法几乎相同，只需要用另一个替换即可。

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

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

如果您对LocalStorage不熟悉，可以参加look at here

Answer 2

网络存储可用于保留切换按钮的状态（在刷新页面时切换的按钮不变）。

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

您的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中，以避免应用程序出现性能问题。

希望这会有所帮助。

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

2 个答案: