专栏首页一只想做全栈的猫【Angular6+】事件绑定

【Angular6+】事件绑定

Angular6+ 事件绑定

临近毕业开始了第二段实习,因为项目需求,技术栈从Vue转到Angular,才发现Angular已经到7了?????,我两年前还是2来着,看来VAR(Vue、Angular、React)老大哥的压力还是很大的,这系列文章也记录一下我重拾Angular的过程。

1. 事件绑定的基础语法

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"></li>

或者可以使用带 on-前缀的形式

<button on-click="onSave()">On Save</button>

添加如下 onSelect() 方法,它会把模板中被点击的英雄赋值给组件的 selectedHero 属性。

selectedHero: Hero;
onSelect(hero: Hero): void {
  this.selectedHero = hero;
}

2. 为事件起别名(不推荐)

@Directive({
outputs: ['clicks:myClick']  // propertyName:alias
})
<div (myClick)="clickMessage=$event" clickable>click with myClick</div>

3. $event和事件处理语句

事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件, \$event就是 DOM 事件对象,它有像 targettarget.value 这样的属性。

<input [value]="hero.name" (input)="hero.name=$event.target.value" />

input 中的值发生改变后,会对 hero.name中的值进行更新。 是不是似曾相识?是的,这就是 Angular 中的双向绑定。

<div>
  <label>name: <input [(ngModel)]="hero.name" placeholder="name" /> </label>
</div>

4. 通过@HostListenr 把事件绑定在宿主监听器上

把一个事件绑定到一个宿主监听器,并提供配置元数据。 当宿主元素发出特定的事件时,Angular 就会执行所提供的处理器方法,并使用其结果更新所绑定到的元素。 如果该事件处理器返回 false,则在所绑定的元素上执行 preventDefault。

Click 事件

import {..., HostListener} from '@angular/core';

...

@Directive({ selector: "button[counting]" })
class CountClicks {
  numberOfClicks = 0;

  @HostListener("click", ["$event.target"])
  onClick(btn) {
    console.log("button", btn, "number of clicks:", this.numberOfClicks++);
  }
}

@Component({
  selector: "app",
  template: "<button counting>Increment</button>"
})
class App {}

Scroll 事件

@HostListener('window:scroll', ['$event'])
  onScroll() {
    this.pageYOffset = window.pageYOffset;
  }

5. 使用 EventEmitter 实现自定义事件(父子组件间事件传递

后面再起一章单独讲 Angular 的组件通信

子组件触发事件 Output

<div>
  <img src="{{heroImageUrl}}" />
  <span [style.text-decoration]="lineThrough"> {{prefix}} {{hero?.name}} </span>
  <button (click)="delete()">Delete</button>
</div>
deleteRequest = new EventEmitter<Hero>();
 delete() {
 this.deleteRequest.emit(this.hero);
 }

父组件接受事件 Input

<app-hero-detail
  (deleteRequest)="deleteHero($event)"
  [hero]="currentHero"
></app-hero-detail>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端芝士树】如何完成数组的去重 Array Unique?

    CloudCat
  • 【Angular6+】属性及样式绑定

    借助 CSS 类绑定,可以从元素的 class attribute 上添加和移除 CSS 类名。

    CloudCat
  • 【Rxjs】Rxjs_Subject 及其衍生类

    在 RxJS 中,Observable 有一些特殊的类,在消息通信中使用比较频繁,下面主要介绍较常用的几个类:

    CloudCat
  • vue切换路由并且传递参数

    用户4344670
  • 【自然框架】 之 主从表的添加、修改

    摘要 1、 这里不是说如何做一个人员管理,这里要说的是自然框架如何处理主从表的添加、修改。人员管理只是一个例子。 2、 人员管理的表的“结构”。 3、 Tab...

    用户1174620
  • cssjshtml vue-echart 点击跳转传参和接收

    葫芦
  • 数据库去除重复数据

    create table temp select max(id) as id from table1 group by name ;//name分组 拿到最...

    冰封一夏
  • NanoMsg框架|Android Studio编译NanoMsg源码

    前面的章节已经把NanoMsg的简介,及C#相关的NNanoMsg使用Demo已经介绍完成了,今天这篇开始我们就要写关于Android怎么使用NanoMsg的文...

    Vaccae
  • 米斯特白帽培训讲义 漏洞篇 越权

    越权漏洞是 Web 应用程序中一种常见的安全漏洞。它的威胁在于一个账户即可控制全站用户数据。当然这些数据仅限于存在漏洞功能对应的数据。越权漏洞的成因主要是开发人...

    ApacheCN_飞龙
  • 如何自定义 JPA 的数据库命名策略

    运行项目,通过数据库或输出的SQL语句,默认策略的表现为:表名及字段全小写,并以下划线分隔

    happyJared

扫码关注云+社区

领取腾讯云代金券