事件绑定

约 177 字小于 1 分钟

2026-09-16

在 angular 中, 事件绑定的语法略有不同, 他使用 (事件名)="方法名($event)" 的方式来绑定事件, 其中 $event 是一个特殊的变量, 他代表了当前事件对象。

这里实际上后面 "" 里的内容就是你需要执行的 js 代码, 所以你需要使用括号来执行他，而不是和 React 和 Vue 一样直接写方法名, 来把这个函数绑定到这个事件上

/src/app/app.ts

import { Component, signal } from '@angular/core'

@Component({
  selector: 'app-root',
  styleUrl: './app.css',
  templateUrl: './app.html',
})
export class App {
  inputText = signal('')
  handleInput(event: Event) {
    const target = event.target as HTMLInputElement
    this.inputText.set(target.value)
  }
}

/src/app/app.html

<input type="text" (input)="handleInput($event)" />

<p>Input text: {{inputText()}}</p>