提高Angular 8中子组件的视觉更新速度

目前，我正试图找到一种方法来提高嵌套子组件的更新速度。嵌套的子组件和父组件都从服务获取数据。当我从API得到响应时，我更新service.items值。这些项是一个映射，因此当值更改时，它们不会在任何子组件中的更改时触发ng。我认为这是由于角度变化检测策略。由于项目贴图实际上没有更改，内部属性会更改，因此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
}

导出接口Post{
身份证号码：，
标题：字符串，
评论：评论[]
}
@可注射（）
导出类数据服务{
邮政：地图
getPost（）{
//进行api调用以填充post
}
UpdatePostWithCommentFromSignal（）{
//这里我设置了中心侦听器
//我获取数据的速度相对较快
this.hub.on（'ReceiveComment'，（comment:comment）=>{
this.post.comments.push（comment）
}
}
}
@组成部分(
模板：``
) 
导出类ParentComponent{
构造函数（公共数据服务：数据服务）{}
}
@组件（{
模板：``
}) 
导出类子组件{
@Input（）post//这来自父组件
}
@组成部分({
模板：“{comments | json}}”
})
导出类NestedChildComponent{
@Input（）注释//这来自子组件
//数据似乎需要几秒钟才能显示在这里，即使在我得到的服务中
//数据马上就来
}

我不确定这是否是最好的方法。我试图以一种简单的方式提取我试图完成的工作的主要思想。如果需要更多的细节，请告诉我。我只是觉得如果我把我的实际代码放在这里会很复杂。但我更希望在获取注释和更新屏幕之间不要有延迟。我确信我可以必须与变更检测相关

---

编辑：Correction.NgDoCheck（）大约在组件实际更新的同时触发。我想我希望孩子在数据更改时触发更新。

在您的服务中，您可以尝试不可变地更新。由于数组和对象是通过引用存储的，因此更改引用（内存中的位置）数组/对象的属性应进行更改检测

服务

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

要使子组件中的更改检测更有效，可以执行以下操作：

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

---

这只会在

@Input

的引用发生更改（内存中的位置发生更改）时触发更改检测，因此应永久更新（）。虽然这对我来说是过度的，可能会产生意外的后果。

我最终使用的解决方案可能不是最有效的。在使用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()
  }
 }
}

@Injectable（）
导出类数据服务{
邮政：地图
构造函数（私有appRef:applicationref）{}
getPost（）{
//进行api调用以填充post
}
UpdatePostWithCommentFromSignal（）{
this.hub.on（'ReceiveComment'，（comment:comment）=>{
this.post.comments.push（comment）
this.appRef.tick（）
}
}
}

不幸的是，这运行了整个应用程序范围的更改检测，如果我能够设法将此逻辑引入到组件中，我可能会考虑使用ChangeDetectorRef