Angular イベントの処理

Angular イベントは、ユーザーインタラクションへの応答として発行されます。Angular イベントが発行されると、そのイベント処理ロジックが実行されます。WPF は、ルーティングイベント、CLR イベント、およびコマンドを提供します。Angular では、DOM イベントがあります。

WPF でボタンのクリックイベントに応答する簡単な例を次に示します。

<Button Click="Button_Click">Click Me</Button>

private void Button_Click(object sender, RoutedEventArgs e)
{
    Console.WriteLine("Hello World");
}

以下は、Angular の例です。

<button (click)="onClicked()">Click Me</button>

onClicked() {
    console.log('Hello World');
}

WPF では、送信者やイベント引数など、イベントに関する情報をよく取得します。Angular では、$event 変数を使用できます。この変数は、呼び出されたイベントに関する情報を提供します。

<button (click)="onClicked($event)">Click Me</button>

onClicked(event) {
    console.log(event.target);
}

イベントオブジェクトを渡すことはあまり有用ではない場合があります。代わりに、ページの input 値を渡すことができます。

<input #messageInput>
<button (click)="onClicked(messageInput.value)">Click Me</button>

onClicked(message) {
    console.log(message);
}

Enter を押したときに入力値を出力するとします。次のように Angular でそれを行うことができます。

<input #messageInput (keyup)="onInputKeyup($event, messageInput.value)">

onInputKeyup(event, message) {
    if (event.keyCode === 13) {
        console.log(message);
    }
}

Angular にはより簡単な方法があります。keyup.enter 疑似イベントにバインドできます。このアプローチを使用すると、イベントハンドラーは、ユーザーが Enter キーを押したときにのみ呼び出されます。

<input #messageInput (keyup.enter)="onInputKeyup(messageInput.value)">

onInputKeyup(message) {
    console.log(message);
}

コンポーネントのイベントに応答

WPF では、独自のカスタムコントロールを作成するときに、次のようないくつかの基本イベントを拡張または変更する必要があります。

public class MyControl : Control
{
    protected override void OnMouseDown(MouseButtonEventArgs e)
    {
        base.OnMouseDown(e);
        // Place your custom logic here
    }
}

Angular では、HostListener デコレーターを使用して同様の結果を達成します。

@Component({
    selector: 'app-my-component',
    templateUrl: './my.component.html',
    styleUrls: ['./my.component.css']
})
export class MyComponent {
    @HostListener('mousedown', ['$event'])
    onMouseDown(event) {
        // place your custom logic here
    }
}

カスタムイベントの作成

場合によっては、カスタムイベントを定義する必要があります。WPF では、CLR またはルーティングイベントを定義できます。以下は、WPF の CLR イベントの簡単な例です。

public event EventHandler<TaskEventArgs> TaskCompleted;

...
this.TaskCompleted(this, new TaskEventArgs());

Angular でカスタムイベントを定義するには、Output デコレータでマークされた EventEmitter プロパティを定義する必要があります。

@Output()
taskCompleted = new EventEmitter<TaskEventArgs>();

...
this.taskCompleted.emit(new TaskEventArgs());

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

Angular イベントの処理

コンポーネントのイベントに応答

カスタム イベントの作成

その他のリソース

カスタムイベントの作成