如何从另一个组件调用组件的ngOnInit

Question

I want to call the ngonInit() of a component from another component, so I use the BehaviorSubject to do that.

I have a component A which is a nav bar component so it is called at the beginning of the application and another component B. I want to reload the ngOnInit of the component A everytime I execute a function in the component B.

This is the component A:

export class A implements OnInit {
 isDisabled : boolean ;
 client : any;
constructor(private draftDataService : DraftDataService) {
  this.draftDataService.getClient().subscribe( data =>  {this.client=data ; 
  })
 }
ngOnInit() {
  
      if(this.client)
      {  
        this.isDisabled = false;
      }
        else {
          this.isDisabled=true;
        }
      }}

And this is the component B:

 export class B implements OnInit, OnDestroy {
   generalInfomodel : GeneralInfoModel= new GeneralInfoModel();
   public selectedClient: ItemClientModel;
   constructor(private draftDataService : DraftDataService){}
   ngOnInit() {}
   selectClient(e: any) {
     if (e) {
         this.selectedClient = e ;
         this.generalInfomodel.client = this.selectedClient;
         this.draftDataService.sendClient(this.generalInfomodel.client);
      }}
       }

And this is the service:

export class DraftDataService {
 constructor() { }
  private subjectClient = new BehaviorSubject<any>('');
  sendClient( client : ItemClientModel){
     this.subjectClient.next(client);
   }
  getClient() : Observable<ItemClientModel>{
    return this.subjectClient.asObservable();
   }}

The problem is that component A is loaded in the beginning so it receive an empty string 'Client' and when the function 'selectClient' in the component B is executed the component A didn't receive it I don't know why? I mean when I console the client in the component A it is showed only one time with undefined value! Can anyone help me to resolve this issue ?

Answer 1

The short answer is to use ViewChild to call the function on component B.

In your HTML Template give ComponentB a name:

<app-componentb #componentb></app-componentb>

In the ComponentB's parent, do something like this:

@ViewChild(componentB) componentB: ComponentB

And then in ComponentB's parent you can do this:

componentB.ngOnInit()

Generally I would not call Angular component hierarchy methods like this unless it was part of a unit test. I'd put that functionality into another method that is called from both ngOnInit() and external methods.

If ComponentA is not aa parent of ComponentB things are slightly more difficult.

If they are siblings on the same parent, you could dispatch an event from ComponentA to tell the parent to reset ComponentB.

Or if you have a different architecture, you could put an Observable in a service that is shared in both ComponentA and ComponentB. ComponentA will trigger a next() and ComponentB will subscribe to force the change.