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

ppcbkaq5 于 2023-01-14 发布在 TypeScript

关注(0)|答案(4)|浏览(172)

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

有什么解决办法吗？

typescript

来源：https://stackoverflow.com/questions/50270359/how-to-add-disable-attribute-on-component-selector

4条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-01-14

cbeh67ev2#

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

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

类型脚本：

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

赞(0）回复(0）举报 2023-01-14

6tqwzwtp3#

以下是禁用属性

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

这可能是有帮助;）

赞(0）回复(0）举报 2023-01-14

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;
}

赞(0）回复(0）举报 2023-01-14

我来回答

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

4条答案

相关问题

热门标签

最新问答