Angular - 禁用按钮

Question

<div id="home-container">
    <div class="sidebar">
        <button mat-raised-button [disabled]="true">This is a button</button>
    </div>
    <div class="main-panel">
        <ac-map></ac-map>
    </div>
</div>

环境：

• 角 10
• Chrome/Firefox（隐身模式）

大家好，

我在显示我的 Angular 项目时遇到了一些不良行为。上面的示例显示了一个简单的组件，其中包含一个默认禁用的按钮（我使用 'true' 作为变量的占位符）。当我加载组件时，按钮应该被禁用。然而。加载组件时，按钮在前一秒或两秒内启用，然后被禁用 - 使其看起来杂乱无章。我怎样才能避免这种情况？

亲切的问候， 斯科特。

Answer 1

根据您的要求，建议您阅读有关 Angular 组件生命周期的文档。 https://angular.io/guide/lifecycle-hooks

请查看此以获取实时示例。

import { Component, OnInit } from "@angular/core";

/**
 * @title Basic buttons
 */
@Component({
  selector: "button-overview-example",
  templateUrl: "button-overview-example.html",
  styleUrls: ["button-overview-example.css"]
})
export class ButtonOverviewExample implements OnInit {
  disabled = true;
  toggle() {
    this.disabled = !this.disabled;
  }

  ngOnInit(): void {
    this.disabled = false;
  }
}

https://stackblitz.com/edit/toggle-angular-material-button-sample?file=src/app/button-overview-example.html

在这个示例中，我使用变量disabled 来指示按钮状态，并实现了OnInit 挂钩，我将false 更改为true。