angular4-事件绑定

事件绑定语法（可以通过 (事件名) 的语法，实现事件绑定）

<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() {} }

 

转载于:https://www.cnblogs.com/avidya/p/7461323.html