页面加载时角值恒流多次调用

Question

我使用的是角4，我正在检查用户是否改变了任何值？在我的页面中有100多个控件(文本框、下拉列表和可编辑网格)。

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

如何避免这种情况，我需要值，只有当用户更改任何值时，才会执行。

​

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您将能够为forms and form controls.指定update mode

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' });

在正式文件 updateOn to 'submit'中，将延迟值和有效性更新，直到控件的父窗体触发提交事件。

Answer 2

根据正式文件，默认情况下，ngOnChanges会在ngOnInit和数据绑定输入属性更改之前调用。

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

• 限制页面加载上的@Input绑定属性更改
• 使用标志只检测用户所做的更改：

例如：

private initialised = false;

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

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

或者:使用不同的lifecylce钩子，或者在组件中使用(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中的值恒等？如果没有，请尝试取消订阅。价值是一个可观察的，需要被取消订阅，否则它将寻找每一个实例的变化。