Question

我正在使用角度4，我正在检查用户是否更改了任何值？在我的页面中有超过100个控件（文本框，下拉列表和可编辑网格）

我只需要检查是否有任何值被更改。为此我使用下面的代码，但是在页面加载时多次调用它。

我如何避免这种情况。我需要 valuechange 仅在用户更改任何值时执行。

import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";


 @ViewChild('fromNote') fnotes;
 
 ngAfterViewInit() {
        this.fnotes.valueChanges.subscribe(val => {
            alert('changed');
        });
}

Answer 1

In Angular 5 您可以指定update mode 的 forms and form controls

仅当表单为 updateOn: 'submit' 时，
submitted 才会运行值更改。

this.nameForm = new FormGroup ({ firstname: new FormControl('', { validators: Validators.required, updateOn: 'submit' }), lastname: new FormControl('', { validators: Validators.required, updateOn: 'submit' }) });

不同的选项是updateOn: 'blur'和updateOn: 'submit'

const c = new FormControl('', { updateOn: 'blur' });和

const c = new FormControl('', { updateOn: 'submit' });

来自Official Documentation updateOn to 'submit'，会延误值和有效性更新，直到控件的父窗体触发提交活动。

Answer 2

根据official documentation，ngOnChanges之前默认调用ngOnInit以及数据绑定输入属性更改。

因此，如果您想避免这种情况，请尝试：

限制页面加载时@Input绑定属性更改
使用标志仅检测用户自定义的更改：

例如：

private initialised = false;

ngInInit(){
  ...
  this.initialized = true;
}

ngOnChanges(){
  if(this.initilazied){<your code here>}
}

或者：使用不同的生命周期钩子，或者在组件中使用(change)方法调用

Answer 3

            import { Component, OnInit, ViewChild, AfterViewInit, HostListener, OnChanges, DoCheck, AfterViewChecked,OnDestroy } from "@angular/core";

            @ViewChild('fromNote') fnotes;
            public subScription;
            ngAfterViewInit() {
                 this.subScription=  this.fnotes.valueChanges.subscribe(val => {
                     alert('changed');
                 });
            }

            ngOnDestroy() {
                 this.subScription.unsubscribe()
            }

您是否尝试取消订阅ngOnDestroy中的值更改？如果没有尝试取消订阅。 Valuechanges是一个可观察的，需要取消订阅，或者它会在每个实例中寻找变化。

页面加载

3 个答案: