Я пытаюсь проверить, допустимы ли входные данные для дочернего компонента. Дочерний компонент может быть одним из нескольких компонентов, отображаемых в зависимости от его типа. Проблема, с которой я сталкиваюсь, заключается в том, что при переключении компонентов Angular выдает страшную ошибку ExpressionChangedAfterItHasBeenCheckedError
.
Parent-Component. html:
<mat-radio-group [(ngModel)]="type">
<div fxLayout fxLayoutAlign="center center" fxLayoutGap="1rem">
<mat-radio-button [value]="componentType.ONE" [checked]="true">One</mat-radio-button>
<mat-radio-button [value]="componentType.TWO">Two</mat-radio-button>
<mat-radio-button [value]="componentType.THREE">Three</mat-radio-button>
</div>
</mat-radio-group>
<div [ngSwitch]="type">
<child-component-one #child *ngSwitchCase="componentType.ONE"></child-component-one>
<child-component-two #child *ngSwitchCase="componentType.TWO"></child-component-two>
<child-component-three #child *ngSwitchCase="componentType.THREE"></child-component-three>
<button [disabled]="!canSave" (click)="save()>Save></button>
</div>
Родительский компонент содержит радиомодуль для переключения между компонентами разных типов и переключатель для выбора правильного компонента в зависимости от того, что выбрано.
Parent-Component.ts
@ViewChild('child', {static: false}) childComponent: BaseChildComponent; //all child components extend BaseChildComponent
get canSave(): boolean {
return this.childComponent && this.childComponent.canSave;
}
Дочерний компонент содержит стандартную форму, ничего интересного ... и дочерний компонент реализует метод canSave, унаследованный от его родителя.
Child-Component .ts
get canSave(): boolean {
//some other validation logic may be included here...
return this.form.valid;
}
Итак ... проблема в том, что при изменении опции радио выдается исключение, когда [disabled]="!canSave"
в родительском компоненте html проверяется.
Кажется, что при смене компонентов существует короткий период, когда childComponent
не определен - и именно здесь начинаются проблемы ... кроме того, я не знаю, как go исправить это. ... Любое руководство здесь будет оценено!