子路由重新加载而不从父路由获取数据

Question

我有一个组件“面板”，它有两个子路线仪表板和假期。 这两个子路由都从父组件服务获取有关其 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 时，两个组件都在创建，但是当您重新访问时，仅创建子组件，因为父组件从未被销毁。检查何时为 2 个组件触发 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;
}

编辑

BehaviorSubject 是满足您要求的好方法。但是如果你自己重新加载子路由，你也有可能会丢失behaviorSubject oject 中的数据。

如果您认为甚至需要刷新子路由的数据，检查来自子组件的数据是更好的方法。（至少在我看来）。

Answer 3

你最好在你的服务中使用BehaviorSubject 并订阅它的 observable，你的服务看起来像：

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}}