在父组件中完成服务之前执行子组件的 ngOninit

Posted 2023-03-13

【中文标题】在父组件中完成服务之前执行子组件的 ngOninit

【英文标题】：ngOninit of child component executing before completing service in parent component

【发布时间】：2019-10-22 14:39:11

【问题描述】：

我有两个组件 panelComponent(parent) 和 dashboardComponent(child)。 panelComponent 在其 ngOninit 中订阅了一项服务，其返回值在子组件 ngOninit 中使用。

问题是，在父服务返回值之前初始运行我的孩子 ngOninit 时，我在子组件中得到一个空结果。 如何解决这个问题？

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)

【参考方案1】：

在父母服务返回值之前执行我的孩子 ngOninit 的初始运行

这是因为异步调用。有关此检查的更多信息，请点击此处Properly use Async calls with 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);
     ); 

我希望这会有所帮助.. :)

【参考方案2】：

最简单的方法是使用 *ngIf。请参阅stackblitz 因为 ngOnInit 发生在应用程序中的组件时

我创建了一个虚拟服务：

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

我使用 pipe(tap) 为服务的属性“数据”赋予价值，所以我不需要做任何事情也订阅任何组件

在 app.component 中，我有：

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

和

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

在控制台中你看到：

name1 undefined
name2 Angular