Angular 2 中 onClick 事件的概念

Muhammad Adil 2023年1月30日 2022年4月20日
  1. Angular 2 onClick 事件
  2. 在 Angular 2 中建立 onClick 事件的簡單步驟
  3. Angular 2 onClick 事件的示例
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 模板。
  • 在模板中新增一個按鈕
  • 在按鈕的指令中定義點選事件處理程式
  • 處理應用模組控制器中的點選事件,並在使用者點選按鈕時相應地更新 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 avatar Muhammad Adil avatar

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