プロパティバインディングで無期限に呼び出される関数

Angularアプリケーションで非常に奇妙な問題が発見されました。プロパティバインディングで無期限に呼び出される関数

のは、私は私のブラウザで今私が見ることができるコンソールを

<html> 
    <body> 
     <button type="button" [disabled]="buttonShouldBeDisabled">Button</button> 
    </body> 
</html>

を次のように定義されたテンプレートを使用して、簡単なexample.component.ts

@Component({ 
    moduleId: module.id.toString(), 
    selector: 'example', 
    templateUrl: 'example.component.html', 
    styles: [``] 
}) 
export class ExampleComponent{ 
    get buttonShouldBeDisabled(){ 
     console.log("property call"); 
     return true; 
    } 
}

があるとしましょう、その文字列「プロパティ呼び出しは」無期限に記録されています。

このような現象が発生する可能性はありますか？これは、私の財産が何度も繰り返し呼び出されていることを意味し、ブラウザがユーザーの行動に反応しないことを正しく理解していますか？

出典

2017-06-27 Paweł Hemperek

プロパティまたは属性バインディングでfunctionを使用すると、各変更検出サイクルで関数が呼び出されます。 –

ゲッターは関数なので、技術的には私はそうしていますか？これは、私の例に似たユースケースを別の方法で処理する必要があることを意味しますか？私は財産も機能も使うべきではない、ということを意味するのですか？もしそうなら、ここで正しいアプローチは何ですか？ –

あなたのアプローチに間違いはありません。確かに、プロパティまたは属性のバインディングのための関数を使用することは少しお勧めしますが、関数が1つまたは2つの場合は大丈夫ですが、パフォーマンスが低下することはありません。私があなただったら、単にboolean変数を使って 'disabled'属性にバインドして、ボタンを無効にするか有効にするかによって状態をtrue/falseに変更します。 –

あなたの全体的なアプローチは結構です、私は今、あなたは、単に別のクリック時に例えばブール値を設定することが可能にisValid

に

<button [disabled]="!buttonShouldBeDisabled>Button</button>

をバインドあなたのhtml要素を持つこの

export class ExampleComponent{ 
isValid: boolean; 

buttonShouldBeDisabled(){ 
    console.log("property call"); 
    return this.isValid;}}

のようにそれを修正しますボタンを押して「無効」を切り替えてくださいベルリンの挨拶に役立ちます。

出典

2017-06-27 11:56:05

私はあまりにもこのことを角度で気づいています。その問題ではなく、各コンポーネントの変更を検出する角度の方法に関連するものです。

出典

2017-06-27 12:56:34

プロパティバインディングで無期限に呼び出される関数

答えて

関連する問題