Улучшена визуальная скорость обновления дочернего компонента в Angular 8

Question

В данный момент я пытаюсь найти способ улучшить скорость обновления вложенного дочернего компонента. Вложенный дочерний компонент и родительский элемент получают данные из службы. Когда я получаю ответ от API, я обновляю значение service.items. Элементы представляют собой карту, поэтому они не вызывают изменения в любом из дочерних компонентов при изменении значения. Я предполагаю, что это связано со стратегией обнаружения изменения углов. Поскольку элементы Map на самом деле не меняются, внутреннее свойство меняется, angular не замечает изменений для ngOnChanges.

Требуется пара секунд, чтобы изменения были представлены в браузере. Может быть, я принимаю неправильный подход. Вот как мои компоненты представлены.

export interface Post {
 id: number,
 title: string,
 comments: Comment[]
}

@Injectable()
export class DataService {
post: Map<number, Post>

getPost() {
 //makes api call to populate post
}

updatePostWithCommentFromSignalR() {
  // Here I set up hub listener 
  // I get the data relatively fast
  this.hub.on('ReceiveComment', (comment: Comment) => {
     this.post.comments.push(comment)
  }
}
}

@Component(
template: `<child-component [post]="dataService.post"></child-component>` 
) 
export class ParentComponent { 
 constructor(public dataService: DataService) {}
}

@Component({ 
template: `<nested-child-component [comments]="post.comments"></nested-child-component>` 
}) 
export class ChildComponent {
@Input() post // This comes from the parent component
}

@Component({
template: '{{comments | json}}'
})
export class NestedChildComponent {
@Input() comments // This comes from the child component
//data seems to take a couple seconds to be displayed here even though in the service I get 
    // data right away
}

Я не уверен, что это лучший подход. Я попытался извлечь основную идею того, что я пытался сделать sh простым способом. Если нужно больше деталей, дайте мне знать. Я просто чувствовал, что было бы сложно, если бы я поместил свой реальный код сюда. Но я бы предпочел, чтобы между получением комментария и обновлением экрана не было лага. Я уверен, что я должен сделать что-то с changeDetection.

РЕДАКТИРОВАТЬ: Исправление. NgDoCheck () срабатывает примерно в то же время, когда компонент фактически обновляется. Думаю, я бы хотел, чтобы ребенок выпустил обновление об изменении данных.

Answer 1

В вашем сервисе вы можете попробовать обновиться неизменно. Поскольку массивы и объекты хранятся по ссылке, изменение ссылки (расположения в памяти) массива / объекта должно привести к обнаружению изменений.

Сервис.

this.hub.on('ReceiveComment', (comment: Comment) => {
     this.post = {
       ...this.post,
       comments: [...this.post.comments, comment],
     }
  }

Для обнаружения изменений более эффективными в ваших дочерних компонентах вы можете сделать:

@Component({
  .....
  changeDetection: ChangeDetectionStrategy.OnPush
})

Это будет запускать обнаружение изменений только тогда, когда ссылки на @Input изменяются (изменение местоположения в памяти), и, следовательно, должно обновляться неизменно (https://angular-2-training-book.rangle.io/change-detection/change_detection_strategy_onpush). Хотя это для меня излишне и может иметь непредвиденные последствия.

Answer 2

Решение, которое я выбрал, вероятно, не самое эффективное. После обновления значения в моем сервисе с помощью метода signalR я использовал ApplicationRef для запуска обновления вручную.

Мой сервис выглядит следующим образом.

@Injectable()
export class DataService {
post: Map<number, Post>

constructor(private appRef: ApplicatonRef) {}

getPost() {
//makes api call to populate post
}

updatePostWithCommentFromSignalR() {
 this.hub.on('ReceiveComment', (comment: Comment) => {
 this.post.comments.push(comment)
 this.appRef.tick()
  }
 }
}

К сожалению, это приводит к изменению всего приложения. обнаружение, и я могу изучить использование ChangeDetectorRef, если мне удастся перенести эту логику c в компонент.