typescript 如何在组件选择器上添加禁用属性?

ppcbkaq5  于 2023-01-14  发布在  TypeScript
关注(0)|答案(4)|浏览(171)

我试图禁用按钮。但按钮是角组件。和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);
}

有什么解决办法吗?

gupuwyp2

gupuwyp21#

因为add-new-button组件可以是任何东西,并且disabled不是所有元素都具有的属性,所以这是行不通的。
您必须定义自己的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>
cbeh67ev

cbeh67ev2#

只需将禁用的逻辑放入click方法本身即可:
模板:

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

类型脚本:

onModalClick() {
    if (!this.isOpenModal) {
      this.openModal('new');
    }
}
6tqwzwtp

6tqwzwtp3#

以下是禁用属性

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

这可能是有帮助;)

qcuzuvrc

qcuzuvrc4#

您可以使用CSS选择器[ng-reflect-disabled]来触发disabled值。
并在HTML文件中添加[disabled]="isOpenModal"而不是[attr.disabled]="isOpenModal"
并在CSS文件中添加以下代码:

add-new-button[ng-reflect-disabled="true"] {
  cursor: default;
  pointer-events: none;
}

相关问题