Дочерний компонент для ожидания асинхронной операции родительского компонента ngOnInit перед инициализацией

Я использую mat-stepper для реализации процесса адаптации клиента. Все 5 персонажей childmat-steppercomponent находятся внутри одного parent составная часть.

<parent-html>
   <mat-horizontal-stepper #ccStepper [linear]="isLinear">
     <mat-step [stepControl]="childAForm">
       <child-a></child-a>
     </mat-step>
   </mat-horizontal-stepper>

 <mat-horizontal-stepper #ccStepper [linear]="isLinear">
     <mat-step [stepControl]="childBForm">
       <child-b></child-b>
     </mat-step>
   </mat-horizontal-stepper>
//3 more child components
</parent-html>

Мне пришлось save and proceed данные для каждого дочернего компонента. applicationID генерируется после save and proceed из first child компонент и мой second, third а также fourth дочерние компоненты должны сохранять данные, введенные в first компонент на основе applicationID,

Чтобы еще больше усложнить ситуацию, всякий раз, когда пользователь сохраняет информацию, она должна храниться как draft с applicationID генерируется (другой маршрут в целом). Пользователь может затем нажать на applicationID и все та же информация должна быть извлечена, и пользователь может затем редактировать информацию предыдущего и следующего компонента.

Для нормального сохранения и продолжения я сохраняю applicationID в behaviour subject и получение всей информации во всех дочерних компонентах.

Это правильный способ сделать, так как он запускает несколько звонков, даже если у меня есть информация, имеющаяся в компонентах одного уровня?

Для редактирования сценария я передаю информацию о клиенте через @Input для всех дочерних компонентов. Проблема здесь childngOnInit уволен раньше parentngOnInit разрешил @Input значение. следовательно, всегда не проходит проверку состояния.

Каков наилучший подход для ее решения? Спасибо за ваше время!!!

1 ответ

Для сценария редактирования: если вы передаете значение с помощью декоратора @Input из родительского в дочерний компонент. Вы можете получить доступ к этим значениям, используя метод ngOnChanges() в дочернем компоненте.

Дочерний компонент:

ngOnChanges(changes: SimpleChanges) {
    if(this.inputData){}
}

Для идентификатора приложения вы можете установить идентификатор приложения в одноэлементном сервисе и получить доступ к этому идентификатору приложения в дочернем компоненте, внедрив сервис.

Другие вопросы по тегам