Question

我有一个组件“ panel”，其中有两个子路线的仪表板和假期。这两个子路由都从父组件服务获取其ngOnInit上的数据。

如果一切正常，一切都可以正常工作，并且仪表板正在加载数据，但是如果我们重新加载子路由，则不会获得父服务数据。

如何解决此问题？

路由模块：-

{
    path: 'panel',
    component: PanelComponent,
    canActivate: [AuthGuard],
    children: [

        {
            path: 'dashboard',
            component: DashboardComponent,

        },
        {
            path: 'holidays',
            component: HolidaysComponent
        }
    ]
}

panelComponent.ts：-

export class PanelComponent implements OnInit {

constructor(private panelService: PanelService, route: ActivatedRoute, private router: Router) {

}

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

DashboardComponent.ts：-

export class DashboardComponent {
/** dashboard ctor */

private userDetails = {
    name:""
}
constructor(private panelService: PanelService) {

}
ngOnInit() {
    //console.log(this.panelService.userDetails.profileDetails[0].name);
    this.userDetails.name=this.panelService.userDetails.profileDetails[0].name
}

Answer 1

创建组件时会调用

ngOnInit。可能是当您第一次访问问题URL时，两个组件都已创建，但是当您重新访问该子组件时，则永远不会破坏父组件。检查是否为这两个组件触发了ngOnInit和ngOnDestroy。

您可能需要重构代码。

Answer 2

当为单个路径渲染这些组件时，最好在组件之间共享数据。

一切正常

在这种情况下，您是子组件，将在父组件之后呈现，但是有时您需要从子路由中刷新，然后需要从子组件中调用服务方法本身。

我认为您需要重构您的子组件，如下所示

ngOnInit() {
  if(!this.panelService.userDetails) { 
     this.panelService.getUserProfile().subscribe( res => {
        this.panelService.userDetails = res;
      },
      err => {
        console.log(err);
      }); 
  }
  this.userDetails.name = this.panelService.userDetails.profileDetails[0].name;
}

Answer 3

您最好在服务中使用BehaviorSubject并订阅其可观察的内容，您的服务应如下所示：

export class PanelService {
  private userDetailsSubject = new BehaviorSubject(null);
  userDetails$: Observable<UserDetail> = this.userDetailsSubject.asObservable();
}

然后更改您的getUserProfile函数

getUserProfile() {
  return this.http.get(‘uri-to-server-resource’).pipe(
    tap(res => this.userDetailsSubject.next(res))
  );
}

还有您的PanelComponent

export class PanelComponent implements OnInit {

  constructor(private panelService: PanelService, route: ActivatedRoute, private router: Router) {
  }

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

您的DashboardComponent随后将订阅该服务上的可观察对象

this.panelService.userDetails$.subscribe(value => this.userDetails = value);

或直接在模板中使用

{{panelService.userDetails$ | asynchronous}}

子路径重新加载而无需从父路径获取数据

3 个答案: