子组件在初始化之前要等待父组件ngOnInit异步操作

Question

I'm using mat-stepper for implementing customer onboarding process. All 5 individual child mat-stepper component are inside one parent component.

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

I have to save and proceed data for each child component. applicationID is generated after save and proceed of first child component and my second , third and fourth child components have to persist data entered in first component based on applicationID .

To further complicate things, whenever user saves information, it has to be stored as draft with applicationID generated (different route altogether). User can then click on applicationID and all the same information have to be fetched and user can then edit the information of previous and next component.

For normal save and proceed, I am storing applicationID in behaviour subject and fetching all the information in all child components.

Is it the right way to do as it triggers multiple calls even though I have information available in sibling components?

For edit scenario, I am passing the customer information via @Input to all child components. The problem here is child ngOnInit is fired before parent ngOnInit has resolved the @Input value. hence always failing the condition check.

What would be the best approach to solve it? Thanks for your time!!!

Answer 1

For Edit Scenario, If you pass value using @Input decorator from Parent to Child Component. You can access those values using ngOnChanges() method in child component.

Child Component:

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

For Application ID, you can set the application ID in a singleton service and you can access that application ID in child component by injecting the service.