【问题标题】:Angular change detection on @Input object@Input 对象的角度变化检测
【发布时间】:2017-03-29 20:25:57
【问题描述】:

我有点理解变化检测在 Angular 2 中的工作原理,但我真的很难将关于变化检测的 AngularJS 方法转移/更改到 NG2。

假设我有一个组件,它采用单个 @Input() anObject 并具有单个函数 logAllProperties() 出于参数考虑,它将所有属性记录到控制台。 我要做的就是调用 logAllProperties() 每次 anObject 更改无论如何。

我知道将对象视为不可变的(使用 Immutable.js 之类的外部库或强制整个对象更改,即使是较小的属性更改)将触发 ngOnChange,但无论如何只要更改就调用函数除了这些之外,或者使用我理解的 DoCheck 可能效率极低。

除了“有没有办法”,什么是正确的方法来做这样的事情?我是 Angular2 的新手,所以如果 Immutable 和 Observables 是要走的路,我很乐意学习正确的方法。

提前致谢

【问题讨论】:

    标签: javascript angular angular2-changedetection


    【解决方案1】:

    每次更改对象时执行操作的直接方法是使用 setter 或 ngOnChange(请参阅 Fals 的回答)。

    使用不可变对象和OnPush 的更改检测策略是提高更改检测性能的一种方法。这不是 Angular 中变更检测最明显的用途。

    关于完整的解释,我建议您阅读此really good article,如果您有时间(45 分钟),您可以查看文章作者here 的此视频

    从那里,您应该对正在发生的事情有一个很好的了解。

    【讨论】:

      【解决方案2】:

      @input 装饰器表示您的组件期望从其父级获取一些数据,这些数据将被该属性捕获

      @output 是 angular2 中的装饰器,其中的父组件可以从子组件中捕获。

      在内部它使用 observable,我不认为它是不可变的。

      ngrx 提供了一种 redux 类型的不可变机制,其中每个状态都被记住并且您也可以返回到它们。

      Observable 和 ngrx 现在并行运行。

      【讨论】:

        【解决方案3】:

        我在我们的项目中发现,在某些情况下使用 set 效果很好,但在其他需要组件之间同步的情况下可能会很麻烦,那么我们使用 ngOnChange那些案例。这是一个例子。

        @Input() set myProperty(myProperty: MyPropertyType) {
                if (myProperty) {
                    this.logService.log(myProperty);
                }
        
                this._myProperty = myProperty;
        }
        private _myProperty: MyPropertyType= new MyPropertyType();
        

        关于 Angular2 新生命周期的事情仍然令人困惑,文档示例不适合大多数现实世界的案例。

        【讨论】:

        • 感谢 Fals 的回答。我不明白每次对象在这个组件之外发生变化时这将如何工作。这最初不是很有用吗?例如,如果我传入一个具有属性 Name='Bob' 的对象,然后我将该属性更新为在应用程序的其他位置等于 'Bill',那么 setter 将如何提供帮助?当然 setter 最初只会用于设置对象,然后对象本身的任何更改都不会使用 setter 吗?
        猜你喜欢
        • 2019-10-04
        • 2018-12-22
        • 2021-06-17
        • 2021-08-07
        • 2018-10-24
        • 1970-01-01
        • 2018-05-07
        • 1970-01-01
        • 2019-07-08
        相关资源
        最近更新 更多