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

Question

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

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

我无法直接访问状态

Answer 1

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

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

并将此输入绑定(bind)到子组件模板中的相关按钮:

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