【Angular教程 230106】03 Angular事件、表单事件、事件对象、双向数据绑定

Angular教程 230106#快捷

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

0 一些基础的概念

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

执行事件 angular

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

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

1. 点击事件（Click Event）:

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

Click me

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

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

3. 键盘事件（Keyboard Events）:

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

4. 鼠标事件（Mouse Events）:

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

5. 表单事件（Form Events）:

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

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

一个详细的

<h3>我是一个首页组件home
h3>
<h3>事件h3>

<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>

<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代表触发事件的元素，在这里是元素，这是事件对象的一个属性，它指向触发事件的元素，在这个例子中是文本输入框。
        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

keyUp:

6 使用事件操作dom元素

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

}

点击按钮变成红色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>