Angular 2의 onClick 이벤트 개념
Angular 2 프레임워크는 애플리케이션의 프론트 엔드를 구축하기 위한 구조적 프레임워크입니다.
Angular 2는 전작보다 사용자 친화적인 많은 새로운 기능을 가지고 있습니다.
한 가지 기능은 Angular 2에서 onClick 이벤트를 사용하여 함수를 호출하는 기능입니다.
Angular 2 onClick 이벤트
Angular 2 이벤트 시스템은 마우스 클릭, 키보드 누르기 및 터치 제스처와 같은 다양한 유형의 이벤트를 처리하는 데 사용할 수 있습니다.
onclick 이벤트는 사용자가 구성 요소 또는 요소를 클릭할 때 이벤트 또는 기능을 트리거합니다.
<button (click)="define()">Define</button>
define() 문은 구성 요소의 define() 메서드를 실행하고 (click)은 버튼 클릭 이벤트를 바인딩합니다.
Angular 2에서 onClick 이벤트를 만드는 간단한 단계
다음 단계를 수행해야 합니다.
-
Angular애플리케이션을 위한HTML템플릿을 만듭니다. -
템플릿에
버튼을 추가합니다. -
버튼의 지시문에
click 이벤트 핸들러를 정의합니다. -
애플리케이션 모듈의 컨트롤러에서 클릭 이벤트를 처리하고 사용자가 버튼을 클릭할 때
view-model데이터를 적절하게 업데이트합니다. -
보기 모델 데이터의
업데이트를 구현하여 사용자가 버튼을 클릭할 때 보기를 새로 고칩니다. -
사용자가 버튼을 클릭할 때 입력 필드를 업데이트하기 위한 지시문을 추가합니다.
Angular 2 onClick 이벤트의 예
먼저 Html 코드를 작성해 보겠습니다.
<button class="clickBtn" (click)="show=!show" >Click me</button>
<div class="Demo" *ngIf="show">
<h3>you can see how things are changing by pressing Clickme button</h3>
<br/>
<h3>This is how we use the concept of OnCLick Event in Angular 2</h3>
ngif 속성은 보기에서 구성요소로 또는 구성요소에서 보기로 값을 연결하는 입력을 정의합니다.
Typescript 코드로 이동합시다.
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-click',
templateUrl: './fm.component.html',
styleUrls: ['./fm.component.css']
})
export class MyFmComponent implements OnInit {
registerForm: FormGroup;
submitted:false;
constructor() { }
ngOnInit() {
}
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app',
templateUrl: './my.component.html',
styleUrls: ['./my.component.css']
})
export class MyComponent implements OnInit {
show = false;
constructor() { }
ngOnInit() {
}
}
마지막으로 app.module.ts에 대한 typescript 코드를 작성해 보겠습니다.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { MyFmComponent } from './clickme/fm.component';
import { MyComponent } from './Event/my.component';
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent, MyComponent, MyFmComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
여기를 클릭하여 전체 작업 코드를 확인하십시오.
Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.
Facebook