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>

环境：

• Angular 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来指示按钮 state，并实现了OnInit挂钩，我将其更改为false为true 。