一、点击事件(click)

1-1.news.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  count=0;
  constructor() {}
  ngOnInit(): void {
  }
  countAdd(){
    this.count++
  }
}

1-2.news.component.html

<p>count:{{count}}</p>
<button (click)="countAdd()">count++</button>

二、input键盘事件

2-1.news.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-news',
  templateUrl: './news.component.html',
  styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit {
  msg="";
  constructor() {}
  ngOnInit(): void {
  }
  handleKeydown(e:any){
    // console.log("keydown");
    // console.log(e);
    this.msg = e.target.value
    if(e.keyCode==13){
      console.log("enter");
      console.log(e.target.value);
    }
  }
}

2-2.news.component.html

<div>
    <input type="text" (keydown)="handleKeydown($event)">
    <p>msg:{{msg}}</p>
</div>