04 Angular事件、表单事件、事件对象、双向数据绑定（45分）
执行事件 angular
在 Angular 中，“执行事件”通常指的是当一个特定的事件发生时触发的一系列动作或函数。Angular 作为一个前端框架，提供了丰富的事件绑定功能，让开发者可以轻松地在 HTML 模板中处理用户的交互动作，如点击、滚动、键盘输入等。
下面是一些 Angular 中常见的事件执行方式的例子：
使用 (click) 属性来绑定点击事件。当用户点击一个元素时，可以触发一个函数或表达式。
html
<button (click)=“doSomething()”>Click me
使用 (dblclick) 来绑定双击事件。
html
比如 (keyup) 和 (keydown) 可以用来在用户按键时触发事件。
html
<input (keyup)=“onKeyUp($event)” />
如 (mouseover) 和 (mouseout) 可用于处理鼠标悬停事件。
html
比如 (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;
}
//mwyKeyDownKeyCode
mwyKeyDownKeyCode(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)” />
changecolor(e:any){
var myDom = e.target;
myDom.style.color=`red`;
}
}
<button (click)=“changecolor($event)”>点击按钮变成红色1
双向绑定是一个核心特性，用于建立视图（HTML 模板）和组件（TypeScript 类）之间的动态通信。Angular 的双向绑定主要通过 [(ngModel)] 指令实现。
HTML 模板部分
在 HTML 模板中，你可能会有一个输入框（input element），并使用 [(ngModel)] 指令来绑定一个组件属性：
Copy code
<input [(ngModel)]="userName">
这里，userName 是你的 Angular 组件中的一个属性。
TypeScript 组件部分
在对应的 TypeScript 文件中，你会定义一个与之相绑定的属性：
Copy code
export class AppComponent {
userName: string = '';
}
在这个例子中，userName 属性与输入框绑定。当用户在输入框中输入内容时，userName 属性的值会实时更新，反之亦然。
从视图到模型：当用户在输入框中输入内容时，ngModel 指令捕获这些更改并更新组件类中的 userName 属性。
从模型到视图：当 userName 属性的值在 TypeScript 代码中被更改时（比如通过某些逻辑或从服务获取数据），这个新值会自动反映在绑定的 HTML 输入框中。
注意事项
为了使用 ngModel，你需要在你的 Angular 模块中导入 FormsModule：
typescript
Copy code
import { FormsModule } from ‘@angular/forms’;
@NgModule({
imports: [
// … 其他模块
FormsModule
],
// …
})
export class AppModule { }
双向绑定使得数据在用户界面和数据模型之间的同步变得简单高效。在用户界面上的任何更改都会即时地反映到应用程序的数据模型中，反之亦然。这大大简化了交互式应用程序的开发。
先在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>