代码之家 › 专栏 › 技术社区 › Anjali

角度禁用按钮后,第一次点击,然后启用页面刷新

angular

0

Anjali · 技术社区 · 6 年前

我的HTML文件中有以下代码:

  <div class="col-md-2">
        <button *ngIf="!FinishingVerification" class="appBtn lineButton" (click)="FinishVerification(); clicked = true;" [disabled]="clicked"   >
          Finish {{Caption}}
          <span><i class="fa fa-check" ></i></span>
        </button>
        <i *ngIf="FinishingVerification" class="fa fa-spinner" aria-hidden="true"    ></i>
      </div>

public clicked: boolean=false;

在FinishVerification()中。我准备好了

this.clicked = false;

我想在页面重新加载或用户在同一会话中重新访问页面而不退出应用程序时再次启用该按钮。

任何帮助将不胜感激。

0 回复 | 直到 6 年前

1

0

mtorreblanca 6 年前

您需要在组件.ts

class Component implements OnInit {

    public clicked: boolean;

    ngOnInit() {
        this.clicked = false;
     }
// your code 
}

编辑1:

您需要添加ngondstroy(),因此代码为:

class Component implements OnInit, OnDestroy {

        public clicked: boolean;

        ngOnInit() {
            this.clicked = false;
         }
    // your code

ngOnDestroy() {
       this.clicked = false; }  
    }

2

1

Yash 6 年前

实现共享服务以保持变量的状态。在所有要使用变量的组件中使用它。

示例代码:

import { Component } from '@angular/core';
import { DataServiceService } from './data-service.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private dataService: DataServiceService){}

  ngOnInit() {
    if (this.dataService.getGlobalValue() === undefined) {
      this.dataService.setGlobalValue(false);
    }
  }

  clicked() {
    console.log(this.dataService.getGlobalValue());
    this.dataService.setGlobalValue(!this.dataService.getGlobalValue());
  }

}

数据-服务.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {

  _globalValue: any;

  constructor() { }

  getGlobalValue(): any {
    return this._globalValue;
  }

  setGlobalValue(value: any) {
    this._globalValue = value;
  }

}

Stackblitz上的完整代码: https://stackblitz.com/edit/angular-xloiz8