Question

我有一个组件如下：

    import { Component, OnInit } from '@angular/core';

    @Component({
        selector: 'app',
        template: `
<div>
    <div>value of a :
        <input [(ngModel)]="a" />
    </div>
    <div>value of b :
        <input [(ngModel)]="b" />
    </div>
    <div>
        Value of a = {{a}}
        <br> Value of b = {{b}}
        <br> Sum instantaneous {{calc(a+b)}}
    </div>
</div>
`   
    })
    export class AppComponent implements OnInit {

        a: string = "";
        b: string = "";
        constructor() { }

        ngOnInit() {
        }

        calc() {
            console.log('test');
            return (+this.a + +this.b);
        }
    }

每次，我都会在文本框中修改（例如，按键）任何内容，甚至只是对文本框进行聚焦/散焦，“＆＃39; calc＆＃39;函数执行两次。

我在这里缺少什么，或者如何让函数执行一次（而不是两次）。

Answer 1

这种情况正在发生，因为更改检测的运行频率比您想象的要高，特别是因为您处于开发人员模式并且所有内容都被检查了两次。

出于这个原因，你不应该从模板中调用函数。其中一个解决方案是使用可以声明为纯函数的管道。

@Pipe({name: 'calc'})
export class CalcPipe implements PipeTransform {
  public transform(a: number, b: number): number {
    return a + b
  }
}

然后像这样使用它。

{{ a | calc : b }}

否则，您可能希望编写将更新类中属性的自定义逻辑。然后绑定属性而不是函数调用。

组件函数以角度2执行两次

1 个答案: