我正在尝试禁用按钮。但按钮是角度分量。 并且Html5禁用属性不能在组件选择器上工作。
我尝试添加这样但不起作用:[attr.disabled]="isOpenModal
按钮Html代码:
<add-new-button [attr.disabled]="isOpenModal"
(click)="openModal('new')"
class="nano-bc-green hover-effect">
</add-new-button>
按钮 - 组件&#34;添加新按钮&#34;
@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 {
}
按钮上使用的Open Modal方法:
public openModal(id: string): void {
const data = {id: id};
this.modalModel.add(AudienceModel.ENTITY_NAME, data);
}
有任何解决方案吗?
答案 0 :(得分:2)
因为add-new-button
组件可以是任何内容,并且disabled
不是所有元素都具有的属性,所以无效。
查看Global Attributes。
您必须定义自己的disabled
属性:
@Input() disabled: boolean;
您可以将此绑定到要禁用的元素,如:
<button [disabled]="disabled">My button</button>
您可以在以下情况下使用它:
<add-new-button [disabled]="isOpenModal"
(click)="openModal('new')"
class="nano-bc-green hover-effect">
</add-new-button>
答案 1 :(得分:1)
将禁用的逻辑放入click方法本身:
模板:
<add-new-button (click)="onModalClick()"
class="nano-bc-green hover-effect">
</add-new-button>
打字稿:
onModalClick() {
if (!this.isOpenModal) {
this.openModal('new');
}
}
答案 2 :(得分:1)
这里是禁用属性
<my-date-picker [options]="myOptions" [disabled]="disabled"
(dateChanged)="onDateChanged($event)"></my-date-picker>
它可能会有所帮助;)