Угловой 6: изменение содержимого компонента на основе параметра URL, задержки изменения содержимого - PullRequest
Новая
       6

Угловой 6: изменение содержимого компонента на основе параметра URL, задержки изменения содержимого

0 голосов
/ 26 июня 2018

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

  ngOnInit() {
    this.id = +this.route.snapshot.paramMap.get('id');
    this.privateService.someService(this.id)
      .pipe(
        take(1)
      )
      .subscribe(
      (response) => {
        this.mapRes = response;
        }
      )
  }

Когда идентификатор в параметре URL изменяется, я изменяю данные в моем шаблоне на основе нового идентификатора. Я также использую оператор rxjs take (), чтобы сделать асинхронную операцию проще и менее запаздывающей. Но отставание продолжается. Это занимает почти секунду с того момента, как я изменяю параметр URL на повторный рендеринг шаблона с новыми данными. 

ngDoCheck() {
   let tempId = +this.route.snapshot.paramMap.get('id');
    if(this.id === tempId) {
      return;
    }
    else {
      this.privateService.someService(this.id)
      .pipe(
        take(1)
      )
      .subscribe(
      (response) => {
        this.mapRes = response;
        }
      )
      this.id = tempId;
    }
  }

Я думаю, что эта задержка происходит, потому что я все еще подписан на некоторый сервис в моем ngOnIt, а затем я снова подключаюсь к сервису в хуке ngDoCheck ().

Как я могу отменить подписку на сервис, не используя уничтожаемый компонент (как здесь), чтобы я мог повторно выполнить рендеринг того же компонента, но с другими данными?

редактирование: Мне интересно, если моя проблема заключается в том, что изменение шаблона изменяет фактическую dom, и это является источником задержки вместо потока? Потому что после запуска ngDoCheck я возвращаю только 1 объект с помощью оператора take (), поэтому поток теоретически останавливается

1 Ответ

0 голосов
/ 26 июня 2018

Да, повторная подписка в ngDoCheck может создать много подписок, и в зависимости от того, сколько экземпляров компонента на экране одновременно, эта проблема умножится. Но настоящая проблема в том, что вы пытаетесь обрабатывать вызов службы каждый раз, когда запускается ngDoCheck. Если вы добавите console.count в этот обратный вызов, я готов поспорить, что вы видите, что вызов службы вызывает много запросов. Вместо этого в init вы можете подписаться на изменения маршрута, подписавшись на route.params или route.paramsMap или router.events. поскольку paramsMap является асинхронной наблюдаемой, она, вероятно, сразу переходит к вашему else блоку и запускает запрос на каждом doCheck.

...