Дочерний компонент для ожидания асинхронной операции родительского компонента ngOnInit перед инициализацией
Я использую mat-stepper
для реализации процесса адаптации клиента. Все 5 персонажей child
mat-stepper
component
находятся внутри одного 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
для всех дочерних компонентов. Проблема здесь child
ngOnInit
уволен раньше parent
ngOnInit
разрешил @Input
значение. следовательно, всегда не проходит проверку состояния.
Каков наилучший подход для ее решения? Спасибо за ваше время!!!
1 ответ
Для сценария редактирования: если вы передаете значение с помощью декоратора @Input из родительского в дочерний компонент. Вы можете получить доступ к этим значениям, используя метод ngOnChanges() в дочернем компоненте.
Дочерний компонент:
ngOnChanges(changes: SimpleChanges) {
if(this.inputData){}
}
Для идентификатора приложения вы можете установить идентификатор приложения в одноэлементном сервисе и получить доступ к этому идентификатору приложения в дочернем компоненте, внедрив сервис.