Angular 如何防止变量值重置

发布于12月05日

以下setData函数在来自子组件的表内滚动时被触发，

this.buttonDisabled:boolean = true;

setData(value: boolean) {
  this.name = value;
  this.buttonDisabled = false;
}

但是，如果我返回到另一个页面并再次返回到旧页面，则this.buttonDisabled值将重置.如何防止重置该值？

推荐答案

您可以将最后一个值存储在服务中，并在需要时获取它，确保在不再需要它的时候重置该值，以避免错误.

import { Component, OnInit } from '@angular/core';
import {
  ActivatedRoute,
  NavigationEnd,
  Router,
  RoutesRecognized,
} from '@angular/router';
import { filter, pairwise } from 'rxjs/operators';
import { DummyService } from '../dummy.服务';
import { RouterExtService } from '../router-ext.服务';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css'],
})
export class StudentComponent implements OnInit {
  prevUrl: string;
  currentUrl: string;

  setData(value: boolean) {
    this.dummyService.buttonDisabled = value;
  }

  get buttonDisabled() {
    return this.dummyService.buttonDisabled;
  }

  constructor(
    private routerExtService: RouterExtService,
    private dummyService: DummyService
  ) {}
  ngOnInit() {}

  showUrl = () => {
    let previous = this.routerExtService.getPreviousUrl();
    console.log('previous', previous);

    let getCurrentUrl = this.routerExtService.getCurrentUrl();
    console.log('getCurrentUrl', getCurrentUrl);
  };
}

服务

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class DummyService {
  buttonDisabled: boolean = false;
  constructor() {}
}

stackblitz