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');
}

In WPF we are used to getting information about the event, such as the sender and the event arguments. In Angular we can use the $event variable. This variable will provide information about the event that was invoked.

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

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

Sometimes passing the event object might not be very useful. Instead, you may want to pass the value of an input on the page.

<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);
    }
}

Surprisingly, in Angular, there is an even easier way to do that. You could bind to the keyup.enter pseudo-event. Using this approach, the event handler will be called only when the user presses Enter.

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

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

Responding to Events of a Component

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
    }
}

Create Your Own Events

때로는 자신만의 이벤트를 정의해야 할 때도 있습니다. 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());

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

Angular 이벤트 처리

Responding to Events of a Component

Create Your Own Events

Additional Resources

테마