Typescript 听取模型值的变化并进行计算

我有一个模板，其中宽度和高度可写，面积计算：

width [___] x height [___] = area [___]

现在，宽度和高度都有一个类似的侦听器：

<input (ngModelChange)="updateValues()"...>

## component

public updateValues(): void {
    this.model.area = this.model.width * this.model.height;
}

这不应该是“责任”，而应该是“结果”。这已经失控了

所以我想反驳这一点，结果的计算被封装在一个带有参数值监听器的类中。大致如下：

class AreaCalculator {
    public constructor(model) {
        model.width.onchange = function() {
            model.area = this.calculate(model.width, model.height);
        }
        model.height.onchange = function() {
            model.area = this.calculate(model.width, model.height);
        }
    }

    public calculate(width, height) {
        return width * height;
    }
}

我想让宽度和高度成为可观察的物体，但在我的模型中，宽度和高度是以数字表示的，我希望保持这种状态

---

然后有一个使用setInterval的选项，但我相信还有更优雅的方法

为什么不用一个计算方法创建一个服务，然后在组件中调用它呢？问题不是计算本身，而是在哪里设置侦听器。我不想他们进入模板。所以你解决了吗？建议（我猜）使用ReactiveForms，您可以订阅FormControll更改事件，而不必在视图中设置更改事件绑定，然后您可以更新计算器模型并将其传递给计算结果并更新视图或其他内容的服务

class AreaCalculator {
    public constructor(model) {
        model.width.onchange = function() {
            model.area = this.calculate(model.width, model.height);
        }
        model.height.onchange = function() {
            model.area = this.calculate(model.width, model.height);
        }
    }

    public calculate(width, height) {
        return width * height;
    }
}