【Angular】05事件绑定、模板引用变量、双向绑定-CFANZ编程社区

【Angular】05事件绑定、模板引用变量、双向绑定

1、事件绑定

事件绑定语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。目标事件名是 click ，模板语句是 onSave() ，事件对象通过$event传递

export class AppComponent {
  clickFun(e:Event){
    console.log(e)
    alert("点击了按钮")
  }

  inpChange(e:any){
    console.log(e.target.value)
  }
}

<!-- 事件绑定  (事件类型) = "执行函数" -->
<input type="text" (input)="inpChange($event)">
<button (click)="clickFun($event)">点击</button>

2、模板引用变量

使用模板变量，可执行某些任务，比如响应用户输入或微调应用的表单。
在模板中，要使用井号 # 来声明一个模板变量。

<input #userName type="text" placeholder="请输入用户名">

在组件模板中的任何地方引用某个模板变量

<button (click)="getUserName(userName.value)">获取userName</button>
<span>{{userName.value}}</span>

export class AppComponent {
  getUserName(v:string){
    console.log(v)
  }
}

Angular 根据所声明的变量的位置给模板变量赋值：

如果在组件上声明变量，该变量就会引用该组件实例。
如果在标准的 HTML 标记上声明变量，该变量就会引用该元素。
如果在<ng-template> 元素上声明变量，该变量就会引用一个TemplateRef 实例来代表此模板。

3、双向绑定

双向绑定是应用中的组件共享数据的一种方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。
ngModel指令只对表单元素有效，所以在使用之前需要导入FormsModule板块

import { FormsModule } from '@angular/forms';
@NgModule({
  imports: [
    FormsModule
  ]
})

export class AppComponent {
  titlemodel='';
}
<input [(ngModel)]="titlemodel" type="text">
<p>标题:{{titlemodel}}</p>

0 条评论