首页 文章

如何在组件选择器上添加disable属性？

提问于
浏览 次
2

我想禁用按钮 . 但按钮是角度分量 . 并且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 {
}

按钮上使用的Open Modal方法：

public openModal(id: string): void {
        const data = {id: id};
        this.modalModel.add(AudienceModel.ENTITY_NAME, data);
}

有什么解决方案吗？

html5 angular typescript

3 回答

  • 1

    只需将禁用的逻辑放入click方法本身：

    模板：

    <add-new-button (click)="onModalClick()"
                 class="nano-bc-green hover-effect">
 </add-new-button>

    打字稿：

    onModalClick() {
    if (!this.isOpenModal) {
      this.openModal('new');
    }
}
    回复于
  • 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

    这是禁用属性

    <my-date-picker [options]="myOptions" [disabled]="disabled" 
                (dateChanged)="onDateChanged($event)"></my-date-picker>

    它可能会有帮助;）

    回复于

相关问题