Angular教程 230106#快捷

04 Angular事件、表单事件、事件对象、双向数据绑定（45分）

0 一些基础的概念

1 执行事件 (click)=”getData()”

执行事件 angular

在 Angular 中，“执行事件”通常指的是当一个特定的事件发生时触发的一系列动作或函数。Angular 作为一个前端框架，提供了丰富的事件绑定功能，让开发者可以轻松地在 HTML 模板中处理用户的交互动作，如点击、滚动、键盘输入等。

下面是一些 Angular 中常见的事件执行方式的例子：

1. 点击事件（Click Event）:

使用 (click) 属性来绑定点击事件。当用户点击一个元素时，可以触发一个函数或表达式。
html

<button (click)=“doSomething()”>Click me

2. 双击事件（Double Click Event）:

使用 (dblclick) 来绑定双击事件。
html

3. 键盘事件（Keyboard Events）:

比如 (keyup) 和 (keydown) 可以用来在用户按键时触发事件。
html

<input (keyup)=“onKeyUp($event)” />

4. 鼠标事件（Mouse Events）:

如 (mouseover) 和 (mouseout) 可用于处理鼠标悬停事件。
html

5. 表单事件（Form Events）:

比如 (ngSubmit) 用于处理表单提交。
html

在这些事件中，可以调用组件类中定义的方法，或者直接在模板中编写简单的表达式来处理事件。Angular 还提供了 $event 对象，它代表了事件的数据，可以在事件处理函数中使用它来获取更多的上下文信息。

一个详细的

<h3>我是一个首页组件home
</h3>
<h3>事件</h3>
<!-- <button (click)="run">点击触发run方法</button>  -->
<h4>1 . 执行自定义方法 </h4>
<p>[click点击触发run（）]</p><button (click)="run()">触发run方法</button> <p>[dblclick双击触发run（）]</p><button (dblclick)="run()">触发run()方法</button>
<hr>
<!-- 绑定一个点击事件到一个方法时，你需要确保方法名后面有括号 ()，这表示调用该方法。 -->
<p>数据：</p>{{sweetGirl}}<h4>2 . 执行自定义方法来获取数据 </h4>
<button (click)="getData()">执行getData()方法获取数据:一个小美女</button>
<h4>3 . 执行自定义方法来改变属性里面的数据 </h4><button (click)="setData()">我是一个改变后的小美女 </button><h3> 表单事件 事件对象</h3>
<h4>1  <br> 以下这段代码展示了如何在Angular组件中处理键盘事件。<br>当用户在输入框中按键时，myKeyDown方法会被调用。<br>该方法检查输入框中的文本（加上刚按的键）是否包含特定的字符串（在这个例子中是“ZYY”）。<br>如果包含，它会弹出一个警告消息，并清空输入框，允许用户开始新的输入。
</h4>
<!-- 在HTML模板中，我们有一个输入框。当用户按下键盘上的任何键时，将触发myKeyDown事件处理器。 -->
<input type="text" (keydown)="myKeyDown($event)"><h4>2 动态显示 ：变量的值设置为目标此处为input这个html框，这个输入元素的当前值,加上刚刚按下的键的值。 </h4>
<input type="text" (keydown)="mwyKeyDownAllInput($event)">
{{showKeyDownAllInput}}<h4>3 键位keycode检测 ：<input type="text" (keydown)="mwyKeyDownKeyCode($event)"></h4>

import { Component, OnInit } from '@angular/core';
@Component({selector: 'app-home',templateUrl: './home.component.html',styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {ngOnInit(): void {}run() {alert("点击后，执行了run()方法")}public sweetGirl: string = "一个小美女";getData() {alert("获取了:" + this.sweetGirl);}setData() {this.sweetGirl = "我是一个setData() 改变后的小美女";}/*** * * 以下这段代码展示了如何在Angular组件中处理键盘事件。当用户在输入框中按键时，myKeyDown方法会被调用。该方法检查输入框中的文本（加上刚按的键）是否包含特定的字符串（在这个例子中是“ZYY”）。如果包含，它会弹出一个警告消息，并清空输入框，允许用户开始新的输入。Z* @param event * */// myKeyDown方法是在用户按下键盘时被调用的事件处理器myKeyDown(event: KeyboardEvent) {/* 获取当前输入框的值，并将新按下的键值附加到该字符串event: KeyboardEvent：这里，event是一个包含了按键事件信息的对象。KeyboardEvent是它的类型，意味着这个对象包含了关于键盘事件的所有信息。 */const inputValue = (event.target as HTMLInputElement).value + event.key;/* 这一部分获取了引发事件的元素的当前值。我们分解来看：1）event.target代表触发事件的元素，在这里是<input>元素，这是事件对象的一个属性，它指向触发事件的元素，在这个例子中是文本输入框。2）event.key表示刚刚被按下的那个键的值，event.target as HTMLInputElement：这个部分是类型断言。它告诉TypeScript，“我们知道event.target是一个HTML的输入元素（即文本框）”，这样我们就可以访问这个输入框的特定属性了。3）.value：这是输入框的一个属性，它表示输入框里当前的文本。*//* + event.key;event.key：这是另一个属性，它表示刚刚被按下的那个键的值。+：这个符号在这里表示字符串拼接。它把输入框里的当前文本（.value）和刚刚按下的键的值（event.key）拼接在一起。所以，myKeyDown函数中的这行代码的意思是：“获取当前输入框里的文本，然后加上刚刚按下的那个键的值。” 这样我们就可以知道在按下这个键之后，输入框里会是什么文本了。*/// 检查输入的字符串是否包含特定的子串“ZYY”if (inputValue.includes('ZYY')) {// 如果包含，弹出一个警告框alert('欢迎主人');// 清空输入框，以便用户可以输入新的文本// 这里将输入框的值设置为空字符串(event.target as HTMLInputElement).value = '';}}//----------结束---------------public showKeyDownAllInput: string = "";// 定义了一个名为showKeyDownAllInput的公共变量，类型是字符串。// 这个变量用于存储和展示按键的结果。// 初始值设置为空字符串""。// 定义了一个名为mwyKeyDownAllInput的方法，用于处理键盘按键事件。// 它接收一个参数e，类型为any（任意类型）。// 这意味着e可以是任何类型的数据，这在这里是用来表示键盘事件的对象。mwyKeyDownAllInput(e: any) {// 在控制台打印事件对象e。// 这通常用于调试目的，以便了解事件对象包含的信息。console.log(e);// 将showKeyDownAllInput变量的值设置为目标此处为input这个html框，这个输入元素的当前值,加上刚刚按下的键的值。// e.target是引发事件的元素，这里转换为HTMLInputElement类型来获取其value属性。// e.key是刚刚被按下的键的值。this.showKeyDownAllInput = (e.target as HTMLInputElement).value + e.key;}//mwyKeyDownKeyCodemwyKeyDownKeyCode(ev: any) {if (ev.keyCode == 13) {console.log("检测到ev.keyCode==13,刚才是按了一下回车");} else  {console.log(ev.target.value);}}
}

img{max-width: 40px;
}
.redStyle {color: red;}.blueStyle{color: blue;}.orangeStyle{color: orange;}

keyDown

<input type=“text” (keydown)=“keyDown($event)” />


keyUp:

<input type=“text” (keyup)=“keyUp($event)” />

6 使用事件操作dom元素

 changecolor(e:any){var myDom = e.target;myDom.style.color=`red`;
}

}

<button (click)=“changecolor($event)”>点击按钮变成红色1

2 双向数据绑定（只针对于表单）

双向绑定是一个核心特性，用于建立视图（HTML 模板）和组件（TypeScript 类）之间的动态通信。Angular 的双向绑定主要通过 [(ngModel)] 指令实现。

1以下是一个简单的 Angular 双向绑定的例子：

HTML 模板部分
在 HTML 模板中，你可能会有一个输入框（input element），并使用 [(ngModel)] 指令来绑定一个组件属性：

Copy code
<input [(ngModel)]="userName">

这里，userName 是你的 Angular 组件中的一个属性。

TypeScript 组件部分
在对应的 TypeScript 文件中，你会定义一个与之相绑定的属性：

Copy code
export class AppComponent {userName: string = '';
}

在这个例子中，userName 属性与输入框绑定。当用户在输入框中输入内容时，userName 属性的值会实时更新，反之亦然。

2双向绑定的工作原理

从视图到模型：当用户在输入框中输入内容时，ngModel 指令捕获这些更改并更新组件类中的 userName 属性。
从模型到视图：当 userName 属性的值在 TypeScript 代码中被更改时（比如通过某些逻辑或从服务获取数据），这个新值会自动反映在绑定的 HTML 输入框中。
注意事项
为了使用 ngModel，你需要在你的 Angular 模块中导入 FormsModule：

typescript
Copy code
import { FormsModule } from ‘@angular/forms’;

@NgModule({
imports: [
// … 其他模块
FormsModule
],
// …
})
export class AppModule { }

3意义

双向绑定使得数据在用户界面和数据模型之间的同步变得简单高效。在用户界面上的任何更改都会即时地反映到应用程序的数据模型中，反之亦然。这大大简化了交互式应用程序的开发。

 先在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 { NewsComponent } from './components/news/news.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';@NgModule({declarations: [AppComponent, NewsComponent, HeaderComponent, HomeComponent],imports: [BrowserModule, FormsModule],// 导入模块providers: [],bootstrap: [AppComponent],
})
export class AppModule {}定义数据public keywords: string;双向绑定<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="keywords">
{{keywords}}定义方法操作值changeKeywords() {this.keywords = '我是改变后的值';}getKeywords() {alert(this.keywords);}重写测试<h1>双向数据绑定--MVVM 只是针对表单</h1>
<input type="text" [(ngModel)]="keywords">
{{keywords}}
<br>
<button (click)="changeKeywords()">改变keywords的值</button>
<button (click)="getKeywords()">获取keywords的值</button>//------changecolor(e:any){var myDom = e.target;myDom.style.color=`red`;}
}
//--html
<button (click)="changecolor($event)">点击按钮变成红色</button>