Angular 2+中(ngModelChange)未触发函数问题咨询

(ngModelChange) 仅在用户手动在输入框中输入内容时触发，通过代码直接修改 dummy2 变量不会触发该事件，这就是 successMessage() 未执行的核心原因。

方法1：直接在updateDummy2中调用successMessage #

这是最直接简单的方案，既然明确updateDummy2执行后dummy2的值已更新，直接在函数末尾调用目标函数即可：

修改Component.ts：

public dummy1 = 0;
public dummy2 = 0;

updateDummy2() {
    console.log("updateDummy2")
    this.dummy2 = Number(this.dummy1) + 20;
    this.successMessage(); // 直接调用成功提示函数
}

successMessage() {
    console.log("success")
}

方法2：使用RxJS BehaviorSubject（订阅方式） #

如果你的业务场景更复杂（比如dummy2可能被多个逻辑修改），订阅方式能统一监听dummy2的所有变化：

修改Component.ts：

import { BehaviorSubject, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

export class YourComponent implements OnInit {
    public dummy1 = 0;
    private dummy2Subject = new BehaviorSubject<number>(0);
    public dummy2$: Observable<number> = this.dummy2Subject.asObservable();

    ngOnInit() {
        // 订阅dummy2的变化，自动触发successMessage
        this.dummy2$.subscribe(() => {
            this.successMessage();
        });
    }

    updateDummy2() {
        console.log("updateDummy2")
        const newValue = Number(this.dummy1) + 20;
        this.dummy2Subject.next(newValue);
    }

    successMessage() {
        console.log("success")
    }
}

对应的Component.html需改用异步管道绑定：

<div id="dummyWrapper">
  <input id="dummy1" type="text" [(ngModel)]="dummy1" (ngModelChange)="updateDummy2()" />
  <input id="dummy2" type="text" [ngModel]="dummy2$ | async" />
</div>

方法3：使用Angular FormControl #

FormControl的valueChanges会在任何方式修改值时触发（包括代码修改），适合表单类场景，也是Angular表单的最佳实践：

修改Component.ts：

import { FormControl, OnInit } from '@angular/forms';

export class YourComponent implements OnInit {
    public dummy1Ctrl = new FormControl('0');
    public dummy2Ctrl = new FormControl('0');

    ngOnInit() {
        // 监听dummy1的变化，更新dummy2的值
        this.dummy1Ctrl.valueChanges.subscribe(value => {
            const newValue = Number(value) + 20;
            this.dummy2Ctrl.setValue(newValue.toString());
        });

        // 监听dummy2的变化，触发successMessage
        this.dummy2Ctrl.valueChanges.subscribe(() => {
            this.successMessage();
        });
    }

    successMessage() {
        console.log("success")
    }
}

对应的Component.html：

<div id="dummyWrapper">
  <input id="dummy1" type="text" [formControl]="dummy1Ctrl" />
  <input id="dummy2" type="text" [formControl]="dummy2Ctrl" />
</div>

• 仅需简单的dummy1更新dummy2后触发函数：选方法1，成本最低；
• dummy2会被多处修改，需统一监听变化：选方法2或3；
• 涉及复杂表单逻辑：优先选方法3，符合Angular表单设计规范。

内容的提问来源于stack exchange，提问作者Muthu