Перезагрузка дочернего маршрута без получения данных из родительского маршрута - PullRequest
Новая
       13

Перезагрузка дочернего маршрута без получения данных из родительского маршрута

2 голосов
/ 06 июня 2019

У меня есть компонент 'панель' с двумя дочерними панелями и выходными.Оба эти дочерних маршрута получают данные об их 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
}

Ответы [ 3 ]

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

Хорошо обмениваться данными между компонентами, когда эти компоненты обрабатываются для одного маршрута.

Все отлично работает

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

Я думаю, что вам нужен рефакторинг вашего дочернего компонента, как показано ниже 

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;
}
1 голос
/ 06 июня 2019

Вам лучше использовать 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}}
1 голос
/ 06 июня 2019

ngOnInit вызывается при создании компонента. Возможно, при первом посещении проблемного URL-адреса создаются оба компонента, но при повторном посещении создается только дочерний элемент, поскольку родительский элемент никогда не был уничтожен. Проверьте, когда ngOnInit и ngOnDestroy запускаются для 2 компонентов.

Возможно, вам потребуется рефакторинг вашего кода.

...