Angular 2 中 onClick 事件的概念
Muhammad Adil
2023年1月30日
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模板。 -
在模板中新增一個
按鈕。 -
在按鈕的指令中定義
點選事件處理程式。 -
處理應用模組控制器中的點選事件，並在使用者點選按鈕時相應地更新
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
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