Question

我有两个组件panelComponent（parent）和dashboardComponent（child）。 panelComponent的ngOninit中有一个服务的预订，其返回值在子组件ngOninit中使用。

问题是，在运行Parents服务返回值之前我的孩子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)

}

Answer 1

在初次运行时，我的孩子ngOninit在Parents服务返回值之前执行

这是由于异步调用。一次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);
     }); 
}

我希望这会有所帮助..：）

Answer 2

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

我创建了一个虚拟服务：

myFunction(event: ClipboardEvent) {
      let clipboardData = event.clipboardData || window.clipboardData;
      let pastedText = clipboardData.getData('text');
      console.log(pastedText);
}

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

在app.component中，我有：

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

和

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

在控制台中，您将看到：

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

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

2 个答案: