首页 文章

Angular ChangeDetectionStrategy.OnPush,子组件发出事件

提问于
浏览
2

我不明白为什么子组件的更改检测在这种情况下运行:

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

@Component({
  selector: 'app-root',
  template: `
    <cmp [ticks]="ticks" (update)="onUpdate($event)"></cmp>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  ticks = 0;

  onUpdate(event) {
    console.log(this.ticks);
  }
}


import { Component, ChangeDetectionStrategy, OnInit, Input, Output, EventEmitter, OnChanges } from '@angular/core';

@Component({
  selector: 'cmp',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<p>Number of ticks: {{ticks}}</p>
`
})
export class CmpComponent implements OnInit, OnChanges {
  @Input('ticks') ticks: number;
  @Output() update: EventEmitter<number> = new EventEmitter();

  ngOnInit() {
    setInterval(() => {
      this.ticks++;
      this.update.emit(this.ticks);
    }, 1000);
  }

  ngOnChanges() {
    console.log('changed');
  }
}

当我运行时,在子视图中更新“滴答数” .

当我删除在父级中侦听事件时,它不会更新视图 .

我的理解如下:

因为父实现了OnPush策略,所以当它侦听从子进程发出的事件时会触发更改检测 . 收到事件后,它不会改变'tick',因此子组件的@Input()不会更新 . 然而,实现OnPush策略的子组件更新了它的视图 . 因此它的行为就好像@Input改变了一样 .

从我的研究:

使用OnPush策略,如果出现以下情况,则会对组件进行更改检测:

  • 在组件本身上收到绑定事件 .

  • @Input()已更新

  • |异步管道收到一个事件
    调用

  • 更改检测"manually"

这些似乎都不适用于子组件 .

有什么解释吗?非常感激 .

1 回答

  • 3

    首先感谢一个好问题 .

    使用角度2.x.x,它将按照您的预期运行 .

    https://plnkr.co/edit/TiOeci5Lr49xvRB5ozHb?p=preview

    但是在angular4中引入了新的View Engine,并且所有代码都被完全覆盖了 .

    https://plnkr.co/edit/SFruiPXEhMmYDP7WuBbj?p=preview

    发生了什么变化?

    当事件发生时,角度调用一些称为 markForCheck 的方法 .

    angular 2 version

    AppView.prototype.markPathToRootAsCheckOnce = function () {
      var /** @type {?} */ c = this;
      while (isPresent(c) && c.cdMode !== ChangeDetectorStatus.Detached) {
        if (c.cdMode === ChangeDetectorStatus.Checked) {
          c.cdMode = ChangeDetectorStatus.CheckOnce;
        }
        if (c.type === ViewType.COMPONENT) {
          c = c.parentView;
        }
        else {
          c = c.viewContainer ? c.viewContainer.parentView : null;
        }
      }
    };
    

    angular 4 version

    function markParentViewsForCheck(view) {
      var /** @type {?} */ currView = view;
      while (currView) {
        if (currView.def.flags & 2 /* OnPush */) {
          currView.state |= 8 /* ChecksEnabled */;
        }
        currView = currView.viewContainerParent || currView.parent;
      }
    }
    

    尽管代码看起来完全不同,但这里没有区别 . 它 starts with current component 并允许检查直到根组件的所有父组件 .

    我突出显示了短语 starts with current component ,因为这正是改变了 .

    Angular 2.x.x starts with AppComponent

    View_App0.prototype.handleEvent_4 = function(eventName,$event) {
      var self = this;
      self.debug(4,2,3);
      self.markPathToRootAsCheckOnce(); // self is AppComponent view
      var result = true;
      if ((eventName == 'update')) {
        var pd_sub_0 = (self.context.onUpdate($event) !== false);
        result = (pd_sub_0 && result);
      }
      return result;
    };
    

    Angular 4 starts with CmpComponent

    function dispatchEvent(view, nodeIndex, eventName, event) {
        var nodeDef = view.def.nodes[nodeIndex];
        var startView = nodeDef.flags & 33554432 /* ComponentView */ ? asElementData(view, nodeIndex).componentView : view;
        markParentViewsForCheck(startView);
        return Services.handleEvent(view, nodeIndex, eventName, event);
    }
    

    因此 CmpComponent 将被打开以供检查

相关问题