ChangeDetectionStrategy OnPush - 如果输入是异步的话,如何触发变更检测

时间:2017-05-22 10:30:35

标签: angular angular2-observables angular2-changedetection

以下是关于onPush变化检测策略的未知。如果发生以下任一情况,则触发OnPush更改检测

  1. 在组件上收到绑定事件。
  2. 输入已更新。
  3. Async管道收到了一个活动。
  4. 手动调用更改检测。
  5. 从上面的列表中,An input was updated必须是引用更改,因此输入必须是不可变的。

    这是我的情景。

    我有父组件Parent,我订阅了一个observable来从API调用中获取数据,我通过@Input将这些数据传递给子组件。

    父组件

    @Component({
      template: '<child-component [data]="data"></child-component>'
    })
    export class ParentComponent implements OnInit {
      this.dataService.get().subscribe(data => {this.data = data})
    }
    

    子组件

    @Component({
      selector: 'child-component',
      template: '{{data.name}}',
      changeDetection: ChangeDetectionStrategy.OnPush
    })
    export class ChildComponent {
      @Input() data;
      constructor() {
        console.log(this.data) 
        // undefined, because the data is async response and not available while bootstrapping.
      }
      ngAfterContentChecked() {
        console.log(this.data) // available
      }
    }
    

    这里的问题是,如果我们将onPush更改检测策略添加到子组件并且输入引用未更改,则更改不会从父级传播到子级。原因是因为onPush策略期望输入是不可变的。如何克服这种情况?

    非常感谢任何帮助。

    更新

    在谷歌上搜索我发现{{3>} Victor Savkin

      

    如果组件仅依赖于其输入属性,并且它们是可观察的,则当且仅当其中一个输入属性发出事件时,此组件才会更改。

    那么我们可以将observables传递给输入并修复此问题吗?如果是这样,请提出一个有效的解决方案。

    请注意,我不想在模板中使用asyn管道或手动触发更改检测。

0 个答案:

没有答案