【问题标题】:angular2 form + async validation + ChangeDetectionStrategy.OnPush = no view refresh?angular2 表单 + 异步验证 + ChangeDetectionStrategy.OnPush = 没有视图刷新?
【发布时间】:2021-05-04 20:40:17
【问题描述】:

[angular2 RC4 + @angular/forms 模块]

我有一个使用OnPush 更改检测的组件,其中包含FormGroup。 此表单包含一个 FormControl 和一个 async 验证器。

验证完成后(不再有pending),视图不会刷新。 只有input blur 事件使视图刷新..

如果我删除 OnPush 更改检测,它可以正常工作。

This plunker demonstrates it.

这是一个角度错误还是我做错了什么?

【问题讨论】:

    标签: angular angular2-forms


    【解决方案1】:

    您似乎错过了使用ChangeDetectionStrategy.OnPush 的目标。

    您的组件上没有任何 @Input 属性或 | async 管道,但它只是使用此策略更新视图状态的一点 - 当 Input 属性更新时(理想情况下使用新对象)。所以现在就摆脱它吧

    更新

    如果您在这种情况下仍坚持使用 OnPush,对于预期行为,您应该手动触发更改检测。

    添加import {..., ChangeDetectorRef} from '@angular/core'; 并在构造函数中注入它的实例。

    在你的方法中你必须添加这个:

     uniqueNameAsync(control: FormControl): Promise<{[key: string]:any}>{
       return new Promise(resolve => {
           setTimeout(() =>{
                resolve(null);
                this.changeRef.markForCheck();
          }, 500);
       });
     }
    

    【讨论】:

    • 使用OnPush,当组件内部发生点击或输入输入等事件时,也会触发视图刷新。在 plunker 中,当您开始输入时,视图会刷新(出现“待定”)。并且同步验证器运行良好..所以我不知道我是否可以将其视为正常行为或异步验证器的错误..
    • 好的,所以如果您在这种情况下仍然坚持使用 OnPush,对于预期的行为,您应该手动触发更改检测。添加import {..., ChangeDetectorRef} from '@angular/core'; 并在构造函数中注入它的实例。在您的方法中,您必须添加:setTimeout(() =&gt;{ resolve(null); this.changeRef.markForCheck(); }, 500)
    • 异步执行仅在与| async 一起使用时调用OnPush 中的更改检测,这在这种情况下是不可能的。我还认为您需要手动调用更改检测。
    • 好的,谢谢大家!我正在使用 ngrx/store 并尝试在几乎所有地方使用onPush。让 ng2 表单在后台实现它会很好,因为它可以在异步验证后知道组件内部的“事情发生”..
    猜你喜欢
    • 2016-07-26
    • 1970-01-01
    • 2018-04-16
    • 1970-01-01
    • 2017-04-08
    • 2017-10-23
    • 2019-09-25
    • 2019-04-05
    相关资源
    最近更新 更多