我试图禁用按钮。但按钮是角组件。和Html5禁用属性不能在组件选择器上工作。
我试着这样添加,但不工作:[attr.disabled]="isOpenModal
按钮Html代码:
<add-new-button [attr.disabled]="isOpenModal"
(click)="openModal('new')"
class="nano-bc-green hover-effect">
</add-new-button>
按钮-组件“添加新按钮”
@Component({
selector: 'nano-add-new-button',
template: `
<div class='nano-f-r nano-f'>
<i class='fa fa-plus'></i>
<span class='nano-ml-5'>
Add New
</span>
</div>`
})
export class NanoAddNewButtonComponent {
}
按钮上使用的打开模态方法:
public openModal(id: string): void {
const data = {id: id};
this.modalModel.add(AudienceModel.ENTITY_NAME, data);
}
有什么解决办法吗?
4条答案
按热度按时间gupuwyp21#
因为
add-new-button
组件可以是任何东西,并且disabled
不是所有元素都具有的属性,所以这是行不通的。您必须定义自己的
disabled
属性:你可以把它绑定到你想禁用的元素上,比如:
您可以按如下方式使用它:
cbeh67ev2#
只需将禁用的逻辑放入click方法本身即可:
模板:
类型脚本:
6tqwzwtp3#
以下是禁用属性
这可能是有帮助;)
qcuzuvrc4#
您可以使用CSS选择器
[ng-reflect-disabled]
来触发disabled值。并在HTML文件中添加
[disabled]="isOpenModal"
而不是[attr.disabled]="isOpenModal"
。并在CSS文件中添加以下代码: