事件绑定语法(可以通过 (事件名)
的语法,实现事件绑定)
<date-picker (dateChanged)="statement()"></date-picker> 等价于: <date-picker on-dateChanged="statement()"></date-picker>
@Component({ selector: 'sl-user', template: ` <button (click)="toggleSkills()"> {{ showSkills ? "隐藏技能" : "显示技能" }} </button> ` }) export class UserComponent { toggleSkills() { this.showSkills = !this.showSkills; } }
可以使用 #variableName
的语法,定义模板引用
import {Component, OnInit} from '@angular/core'; @Component({ selector: 'app-simple-form', template: ` <div> <input #myInput type="text"> <button (click)="onClick(myInput.value)">点击</button>
<input (keydown.enter)="onEnter($event,myInput.value)">//$event
的顺序是任意的 </div> `, styles: [] })
export class SimpleFormComponent implements OnInit { onClick(value) { console.log(value); }
onEnter(event,value) {
console.log(value);
}
ngOnInit() {} }