Как отключить кнопку в навигационном компоненте

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.

и привязать этот ввод к соответствующей кнопке в шаблоне дочернего компонента:

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

Answer 2

Вы должны добавить в ... component.ts

@Input() buttonIsDisabled: boolean

и связать этот ввод с соответствующей кнопкой в ​​шаблоне компонента:

<button [disabled]="buttonIsDisabled">Some button in the template</button>