Angular导航组件按钮禁用问题：属性绑定错误及状态访问解决方案

Alright, let's break down what's going on here and fix this step by step. The core issues are mismatched input properties between your parent and child component, and missing input definitions in the child.

1. Fix the Input Property Mismatch & Define Missing Inputs #

First, your child component (EcheqProgressNavComponent) doesn't have an input defined for the disabled state you're trying to pass from the parent. When you tried [disabled] initially, Angular threw an error because that input doesn't exist on the component. Later, you switched to [isbtnDisabled] in the parent, but still didn't add that input to the child.

Let's add a clear, properly named input to the child component:

export class EcheqProgressNavComponent implements OnInit { 
  @Input() currentPage: number; 
  @Input() totalPages: number; 
  @Input() conditionals: { isFirst?: boolean; sending?: boolean }; 
  // Add this input to receive the disabled state from the parent
  @Input() isDisabled: boolean;
  @Output() previous = new EventEmitter<void>(); 
  @Output() next = new EventEmitter<void>(); 
  
  constructor() {} 
  ngOnInit() {} 
}

2. Update the Child Template to Use the New Input #

Your child template was trying to reference a status variable that doesn't exist in the component. Replace that with the isDisabled input we just defined, and combine it with your existing conditional logic to disable the buttons correctly:

<div class="echeq-progress-nav"> 
  <button type="button" 
          class="echeq-progress-button echeq-progress-button-back" 
          (click)="previous.emit()" 
          [ngClass]="{ disabled: (conditionals?.isFirst || conditionals?.sending) || isDisabled }" 
          [disabled]="(conditionals?.isFirst || conditionals?.sending) || isDisabled" > 
    <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?.sending || isDisabled }" 
          [disabled]="conditionals?.sending || isDisabled" > 
    <span class="fa fa-caret-right"></span> 
  </button> 
</div>

(Note: I used optional chaining ?. here to avoid errors if conditionals is undefined, which makes the code safer.)

3. Align the Parent Component's Binding #

Now update the parent's component usage to match the input name we defined (isDisabled) instead of isbtnDisabled:

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

Why This Works #

• We're explicitly defining an isDisabled input in the child component, so Angular recognizes the binding from the parent.
• The child template now uses this input alongside your existing conditionals logic to disable buttons when either the expiration status is true OR your other conditions (like isFirst or sending) are met.
• All property names are aligned between parent and child, eliminating the "unknown property" errors.

内容的提问来源于stack exchange，提问作者user12911826