angular - 如何手动触发更改事件 - angular2

Question

给定以下组件:

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item></compB>`
})
export class CompA {
    item:any;
    updateItem():void {
        item[name] = "updated name";
    }
}

@Component({
    selector: 'compB',
    template:  template: `<p>{{item[name]}}</p>`
})
export class CompB implements OnInit{
    @Input() item: any;
    someArray: any[];

    ngOnInit():void {
        someArray.push("something");
    }
}

据我了解，除非更改完整的 item 对象，否则 angular2 无法识别 item 上的更改。因此，我想在调用 updateItem 方法时为 item 手动发出更改事件。然后，使子组件即 CompB 重新呈现，就好像 Angular 以常规方式检测到变化一样。

目前，我所做的是实现 CompB 的 ngOnInit 方法，并通过 在 updateItem 方法中调用该方法>ViewChild 链接。故事的另一部分是我的实际来源有像 someArray 这样的对象，我想在每次渲染时重置它们。不过，我不确定重新渲染是否会重置 someArray。目前，我正在 ngOnInit 方法中重置它们。

所以，我的问题是:如何触发对父对象更深层元素的更改的重新渲染？

谢谢

Answer 1

As far as I understood that unless the complete item object is changed, angular2 does not recognize the changes on item.

并不是那么简单。您必须区分对象发生变化时触发 ngOnChanges 和子组件的 DOM 更新。 Angular 无法识别 item 已更改并且不会触发 ngOnChanges 生命周期 Hook ，但如果您引用 的特定属性，DOM 仍将更新模板中的项目。这是因为保留了对该对象的引用。因此要有这种行为:

And afterwards, make the child component i.e. CompB re-rendered as if angular detected a change in the regular way.

您无需特别执行任何操作，因为您仍会在 DOM 中进行更新。

手动更改检测

您可以插入一个变化检测器并像这样触发它:

@Component({
    selector: 'compA',
    template:  template: `<compB [item]=item></compB>`
})
export class CompA {
    item:any;
    constructor(cd: ChangeDetectorRef) {}

    updateItem():void {
        item[name] = "updated name";
        this.cd.detectChanges();
    }
}

这会触发对当前组件及其所有子组件的更改检测。

但是，它不会对您的情况产生任何影响，因为即使 Angular 没有检测到 item 的变化，它仍然会运行变化检测 strong> 用于子 B 组件并更新 DOM。

除非您使用ChangeDetectionStrategy.OnPush。在这种情况下，一种适合您的方法是在 CompB 的 ngDoCheck Hook 中进行手动检查:

import { ChangeDetectorRef } from '@angular/core';

export class CompB implements OnInit{
    @Input() item: any;
    someArray: any[];
    previous;

    constructor(cd: ChangeDetectorRef) {}

    ngOnInit():void {
        this.previous = this.item.name;
        someArray.push("something");
    }

    ngDoCheck() {
      if (this.previous !== this.item.name) {
        this.cd.detectChanges();
      }
    }
}

您可以在以下文章中找到更多信息:

• Everything you need to know about change detection in Angular文章。
• The mechanics of DOM updates in Angular
• The mechanics of property bindings update in Angular