时间戳

首页 > 解决方案 > 如何使用 ChangeDetectionStrategy 进行父子组件之间的数据更新

javascript - 如何使用 ChangeDetectionStrategy 进行父子组件之间的数据更新

问题描述

我看过几个相关的主题ChangeDetectionStrategy，但我对它的不同用法感到困惑。每当父组件上的数据发生更改时，我只想更新子组件中的数据。为此，我看到它changeDetection: ChangeDetectionStrategy.OnPush被添加到Component父字段中，但我不确定是否应该使用ChangeDetectorRef参数或一些默认方法，例如ngDoCheck()方法。那么，如何在父组件和子组件之间执行此操作？我应该明确添加来自父级的参数，还是自动更新@Input变量？

import { Component,
         Input,
         ChangeDetectionStrategy,
         ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: string[];

  constructor(private cd: ChangeDetectorRef) {}

  refresh() {
    this.cd.detectChanges();
  }
}

标签： javascriptangulartypescriptrxjsonchange

解决方案

不同之处在于ChangeDetectionStrategy.OnPush，您的组件只会在发生以下情况时检测到更改：

  1. 输入参考更改
  2. 源自组件或其子之一的事件
  3. 在视图中使用异步管道
  4. 显式运行变更检测

因此，如果您不更改输入的引用，则必须手动检测更改。这是显示和之间区别的stackblitzOnPushDefault

推荐阅读