Блог

Я использую slide-toggle в aproject.Однако я не могу сохранить переключенный stae.Каждый раз, когда я обновляю страницу, переключатель слайдов возвращается в состояние по умолчанию вместо того, чтобы оставаться в переключенном состоянии.Я новичок в 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>
  

Для сохранения состояния кнопки переключения можно использовать веб-хранилища (переключаемая кнопка не изменяется при обновлении страницы).

Здесь я сделал рабочую демонстрацию 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 , чтобы избежать проблем с производительностью приложения.

Надеюсь, это полезно.

Сохраните свое свойство переключения 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';
}