Konzept des onClick-Ereignisses in Angular 2
-
das onClick-Event
Angular 2 - Einfache Schritte zum Erstellen eines onClick-Ereignisses in Angular 2
- Beispiel für ein Angular 2 onClick-Ereignis
Das Framework Angular 2 ist ein strukturelles Framework zum Aufbau des Frontends einer Anwendung.
Angular 2 hat viele neue Funktionen, die es benutzerfreundlicher machen als sein Vorgänger.
Ein Feature ist die Möglichkeit, eine Funktion mit Hilfe eines onClick-Events in Angular 2 aufzurufen.
das onClick-Event Angular 2
Das Ereignissystem Angular 2 kann verwendet werden, um verschiedene Arten von Ereignissen wie Mausklicks, Tastaturdrücke und Berührungsgesten zu verarbeiten.
Das Ereignis onclick löst ein Ereignis oder eine Funktion aus, wenn ein Benutzer auf eine Komponente oder ein Element klickt.
<button (click)="define()">Define</button>
Die Anweisung define() führt die Methode define() der Komponente aus und (click) bindet das Click-Event der Schaltfläche.
Einfache Schritte zum Erstellen eines onClick-Ereignisses in Angular 2
Wir müssen die folgenden Schritte ausführen.
-
Erstellen Sie eine
HTML-Vorlage für die AnwendungAngular. -
Fügen Sie der Vorlage einen
buttonhinzu. -
Definiere
click event handlerin der Direktive der Schaltfläche. -
Behandeln Sie das Klickereignis im Controller des Anwendungsmoduls und aktualisieren Sie die
Ansichtsmodell-Daten entsprechend, wenn der Benutzer auf die Schaltfläche klickt. -
Implementieren Sie ein
updateder Ansichtsmodelldaten, um die Ansicht zu aktualisieren, wenn der Benutzer auf die Schaltfläche klickt. -
Fügen Sie eine Anweisung zum Aktualisieren eines Eingabefelds hinzu, wenn der Benutzer auf eine Schaltfläche klickt.
Beispiel für ein Angular 2 onClick-Ereignis
Zuerst schreiben wir den Html-Code.
<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>
Das Attribut ngif definiert die Eingabe, die den Wert von Ansicht zu Komponente oder von Komponente zu Ansicht bindet.
Kommen wir zum Typescript-Code.
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() {
}
}
Schreiben wir zum Schluss den TypeScript-Code für app.module.ts
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 { }
Klicken Sie hier, um den vollständigen Arbeitscode zu überprüfen.
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