ngOninit дочернего компонента, выполняющегося перед завершением обслуживания в родительском компоненте - PullRequest
Новая
       2

ngOninit дочернего компонента, выполняющегося перед завершением обслуживания в родительском компоненте

0 голосов
/ 07 июня 2019

У меня есть два компонента panelComponent (родительский) и dashboardComponent (дочерний). PanelComponent имеет подписку на службу в своем ngOninit, и ее возвращаемое значение используется внутри дочернего компонента ngOninit.

Проблема в том, что при начальном запуске моего childs ngOninit выполняется до того, как служба Parents возвращает значение, и я получаю нулевой результат в дочернем компоненте. Как решить эту проблему?

panelComponent.ts: - 

    ngOnInit() {
    this.panelService.getUserProfile().subscribe(
        res => {
            this.panelService.userDetails = res;
            this.router.navigate(['panel/dashboard'])
        },
        err => {
            console.log(err);
        },
    ); 

}

panelService.ts: - 

export class PanelService {
userDetails;
constructor(private http: HttpClient) {
}
getUserProfile() {
    const httpOptions = {
        headers: new HttpHeaders({
            'Authorization': `Bearer ${localStorage.getItem('token')}`
        })
    };
    return this.http.get('/api/UserProfile/UserProfile', httpOptions);
}

dashboardComponent.ts: - 

    ngOnInit() {

    console.log(this.panelService.userDetails)

}

Ответы [ 2 ]

1 голос
/ 07 июня 2019

Самый простой способ - использование * ngIf. см. stackblitz , потому что ngOnInit происходит, когда в приложении находится компонент

Я создаю фиктивный сервис: 

export class DataService {
  data:any;
  getData()
  {
    return of("Angular").pipe(
      delay(500),
      tap(res=>this.data=res)
    )
  }
}

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

В app.component у меня есть: 

ngOnInit()
  {
    this.dataService.getData().subscribe(()=>{});
  }

и 

<hello name="{{ name1 }}"></hello>
<hello *ngIf="dataService.data" name="{{ name2 }}"></hello>

В консоли вы видите: 

name1 undefined
name2 Angular
1 голос
/ 07 июня 2019

при первоначальном запуске моего childs ngOninit, выполняемого до того, как служба Parents возвращает значение

Это из-за асинхронных вызовов.Подробнее об этой проверке здесь один раз Правильно используйте асинхронные вызовы с Angular 5 .

В вашем случае все должно работать нормально, лучше проверить ответ, полученный вами от службы, прежде чем перенаправлять ее надочерний компонент.

panelComponent.ts 

  ngOnInit() {
    this.panelService.getUserProfile().subscribe(
        res => {
          if(res) {
             this.panelService.userDetails = res;
             this.router.navigate(['panel/dashboard'])
          }
        },
        err => {
            console.log(err);
     }); 
}

Надеюсь, это поможет ..:)

...