Angularテンプレート内にインライン関数を定義できないのはなぜですか？どのようにそれを行うには？

Question

私は角度2を使用しており、それは初めてです。私はボタンをクリックするための小さな関数を呼び出すしたいと思いました。だから私は（私が反応背景から来るかもしれないbcos）これをやってみました：

<button class="btn btn-primary" (click)="(() => { console.log('hi') })()"> 
    Click Me 
</button> 

私は(click)属性の生命維持を使用しました。しかし、それは動作しませんでした。なぜ動作しないのですか？また、無名関数を宣言し、ボタンをクリックして呼び出す方法はありますか？
実際に何をしたいのですか？(val) => { value = val }

Answer 1

角度を評価する式を入力するだけで問題ないです。たとえば、コンポーネントにプロパティがある場合。 value、あなただけ次を使用することができます。それは関数の内部であるかのように

<button class="btn btn-primary" (click)="value = 'hi'"> 
    Click Me 
</button> 

角度は、本質的にちょうど（それは大きな簡素化ですが、自分の目的のために働く）あなたが提供するコードを呼び出します。

Answer 2

Angularでは、関数を呼び出すときにcomponent.tsファイル内の特定の関数をチェックします。

たとえば、コンソールを呼び出すと、logという名前のオブジェクトが対応するcomponent.tsファイル内のそのオブジェクトの関数として検索され、コンソールが未定義になります。

コンポーネントファイルにlogという名前の関数を作成し、必要に応じてテンプレート内で呼び出すことができます。

component.ts

log(value) { 
    console.log(value); 
} 

HTMLテンプレート

<button class="btn btn-primary" (click)="log('message')">