时间戳

首页 > 解决方案 > 如何禁用导航组件中的按钮

javascript - 如何禁用导航组件中的按钮

问题描述

我有一个导航组件，您可以在其中导航回来。但在某种情况下，我想禁用导航按钮。所以我这样尝试：


<app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"
      [disabled]="status === EcheqSubmissionStatus.EXPIRED"
      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"

    ></app-echeq-progress-nav>

这是组件：

export class EcheqProgressNavComponent implements OnInit {
  @Input() currentPage: number;
  @Input() totalPages: number;
  @Input() conditionals: { isFirst?: boolean; sending?: boolean };

  @Output() previous = new EventEmitter<void>();
  @Output() next = new EventEmitter<void>();

  constructor() {}

  ngOnInit() {}
}

但我收到这样的错误：


Can't bind to 'disabled' since it isn't a known property of 'app-echeq-progress-nav'.

那么我必须解决什么问题？

谢谢

好的，我这样尝试：

<div class="echeq-progress-nav">
  <button
    type="button"
    class="echeq-progress-button echeq-progress-button-back"
    (click)="previous.emit()"
    [ngClass]="{ disabled: conditionals && (conditionals.isFirst || conditionals.sending) }"
    [disabled]="status === EcheqSubmissionStatus.EXPIRED"

  >
    <span class="fa fa-caret-left"></span>
  </button>
  <div class="echeq-progress-pages">Vraag {{ currentPage }} / {{ totalPages }}</div>
  <button
    type="button"
    class="echeq-progress-button echeq-progress-button-forward"
    (click)="next.emit()"
    [ngClass]="{ disabled: conditionals && conditionals.sending }"
    [disabled]="status === EcheqSubmissionStatus.EXPIRED"
  >
    <span class="fa fa-caret-right"></span>
  </button>
</div>

我有这样的：

  <app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"

      [isbtnDisabled]="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED"

      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"

    ></app-echeq-progress-nav>

但在这儿 ：

 <app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"

      [isbtnDisabled]="currentEcheqSubmission.status === EcheqSubmissionStatus.EXPIRED"

      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"

    ></app-echeq-progress-nav>

我没有直接访问状态

标签： javascriptangular

解决方案

您应该在子组件的 component.ts (echeq-progress-nav) 中添加一个 Input 装饰器

@Input() isBtnDisabled = false; // by default not disabled.

并将此输入绑定到子组件模板中的相关按钮：

<div class="echeq-progress-nav">
  <button
    type="button"
    class="echeq-progress-button echeq-progress-button-back"
    (click)="previous.emit()"
    [ngClass]="{ disabled: conditionals && (conditionals.isFirst || conditionals.sending) }"
    [disabled]="isBtnDisabled">
    <span class="fa fa-caret-left"></span>
  </button>
  <div class="echeq-progress-pages">Vraag {{ currentPage }} / {{ totalPages }}</div>
  <button
    type="button"
    class="echeq-progress-button echeq-progress-button-forward"
    (click)="next.emit()"
    [ngClass]="{ disabled: conditionals && conditionals.sending }"
    [disabled]="isBtnDisabled">
    <span class="fa fa-caret-right"></span>
  </button>
</div>

在父组件中，将值传递给子组件。

<app-echeq-progress-nav
      *ngIf="!submitting"
      [currentPage]="currentEcheqPageIdx + 1"
      [totalPages]="currentEcheqPath.length"
      (next)="next()"
      (previous)="prev()"
      [isBtnDisabled]="status === EcheqSubmissionStatus.EXPIRED"
      [conditionals]="{
        isFirst: currentEcheqPager.isFirst,
        sending: sending
      }"

    ></app-echeq-progress-nav>

推荐阅读