Блог

Я хочу вызвать ngOnInit() компонента из другого компонента, поэтому я использую BehaviorSubject для этого.

У меня есть компонент A, который является компонентом панели навигации, поэтому он вызывается в начале приложения, и другой компонент B. Я хочу перезагружать ngOnInit компонента A каждый раз, когда я выполняю функцию в компоненте B.

Это компонент 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;
        }
      }}
 

И это компонент 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);
      }}
       }
 

И это сервис :

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

Проблема в том, что компонент A загружается в начале, поэтому он получает пустую строку ‘Client’, и когда выполняется функция ‘selectClient’ в компоненте B, компонент A не получил ее, я не знаю почему! Я имею в виду, когда я утешаю клиента в компоненте A, он отображается только один раз с неопределенным значением! Кто-нибудь может помочь мне решить эту проблему?

Короткий ответ — использовать ViewChild для вызова функции в компоненте B.

В вашем HTML-шаблоне дайте ComponentB имя:

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

В родительском компоненте ComponentB сделайте что-то вроде этого:

 @ViewChild(componentB) componentB: ComponentB
 

А затем в родительском компоненте ComponentB вы можете сделать это:

 componentB.ngOnInit()
 

Обычно я бы не вызывал подобные методы иерархии компонентов Angular, если только это не было частью модульного теста. Я бы поместил эту функциональность в другой метод, который вызывается как из ngOnInit(), так и из внешних методов.

Если ComponentA не является родителем ComponentB, все немного сложнее.

Если они являются братьями и сестрами одного и того же родителя, вы можете отправить событие из ComponentA, чтобы сообщить родителю о сбросе ComponentB.

Или, если у вас другая архитектура, вы можете поместить наблюдаемый объект в службу, которая является общей как для ComponentA, так и для ComponentB. ComponentA запустит a next() , а ComponentB подпишется на принудительное изменение.