角度-禁用按钮

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(隐身模式(

大家好，

在展示我的棱角分明的项目时，我遇到了一些不可取的行为。上面的例子显示了一个简单的组件，其中有一个默认禁用的按钮(我使用"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来指示按钮状态，并实现了将false更改为true的OnInit挂钩。

Answer 2

因为您使用"被禁用"；HTML属性就是它的行为方式

加载组件时，按钮在第一秒或两个，然后被禁用，使其看起来杂乱无章。

现在让我简单地告诉你一些关于"；被禁用"；在我向您展示正确的方法之前，请先使用HTML属性，这样您就不会重蹈覆辙。

按钮标记的"disabled"属性源自HTML而非angular。介绍它的主要目的是为用户提供一种简单的方式来与网页上的按钮进行交互。例如，当用户在页面上看到一个不活动的按钮时，他或她永远不会点击它，这是一个非常好的用户体验。大多数情况下，你会看到这个标签的使用方式类似于…

<button disabled>Click</button>

破解方法是只在纯HTML中包含或不包含属性。它的缺失意味着按钮元素没有被禁用，而它的存在则相反。所以下面的代码将使按钮元素禁用，即使它们有不同的true和amp；分配给它们的值为false。

<button disabled="true">Click 1</button>
<button disabled="false">Click 2</button>

但在angular中，您可以在属性绑定的帮助下禁用按钮，我们可以通过以下操作来实现此功能：

<button class="primary" [disabled]="true">Submit</button>

现在，回到你的问题：

无论如何。加载组件后，按钮在前一两秒钟内处于启用状态，然后处于禁用状态，使其看起来杂乱无章。我该如何避免这种情况？

我试过你的代码，是正确的。因此，这个问题可能与一个对你的按钮有影响的库有关。但是，如果您找不到库，请使用css隐藏按钮。然后在组件文件中。显示超时后的按钮元素。