Angular 2-이벤트 처리

Angular 2에서는 버튼 클릭이나 다른 종류의 이벤트와 같은 이벤트도 매우 쉽게 처리 할 수 있습니다. 이벤트는 html 페이지에서 트리거되고 추가 처리를 위해 Angular JS 클래스로 전송됩니다.

이벤트 핸들링을 달성 할 수있는 방법의 예를 살펴 보겠습니다. 이 예에서는 클릭 버튼과 상태 속성 표시를 살펴 보겠습니다. 처음에는 상태 속성이 true입니다. 버튼을 클릭하면 상태 속성이 false가됩니다.

Step 1 − app.component.ts 파일의 코드를 다음과 같이 변경합니다.

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

@Component ({ 
   selector: 'my-app', 
   templateUrl: 'app/app.component.html' 
}) 

export class AppComponent { 
   Status: boolean = true; 
   clicked(event) { 
      this.Status = false; 
   } 
}

위 코드에 대해 다음 사항에 유의해야합니다.

초기에 참인 부울 유형의 상태라는 변수를 정의하고 있습니다.
다음으로 html 페이지에서 버튼을 클릭 할 때마다 호출되는 clicked 함수를 정의합니다. 함수에서 Status 속성 값을 true에서 false로 변경합니다.

Step 2 − 템플릿 파일 인 app / app.component.html 파일을 다음과 같이 변경합니다.

<div> 
   {{Status}} 
   <button (click) = "clicked()">Click</button> 
</div>

위 코드에 대해 다음 사항에 유의해야합니다.

먼저 클래스의 Status 속성 값을 표시합니다.
그런 다음 Click 값으로 button html 태그를 정의합니다. 그런 다음 버튼의 클릭 이벤트가 클래스의 클릭 이벤트에 대해 트리거되는지 확인합니다.

Step 3 − 모든 코드 변경 사항을 저장하고 브라우저를 새로 고치면 다음과 같은 출력이 표시됩니다.

Step 4 − 클릭 버튼을 클릭하면 다음과 같은 출력이 나타납니다.