angular 监听窗口滚动

转自:http://brianflove.com/2016/10/10/angular-2-window-scroll-event-using-hostlistener

import { HostListener} from "@angular/core";

@HostListener("window:scroll", [])
onWindowScroll() {
 //we'll do some stuff here when the window is scrolled
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Angular中,可以使用以下两种方法来监听事件: 1. 使用@Output装饰器和EventEmitter类来创建自定义事件。在子组件中,使用EventEmitter类来触发自定义事件,然后在父组件中使用@Output装饰器来监听该事件。 例如,在子组件中定义一个名为myEvent的自定义事件: ```typescript import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'child-component', template: '<button (click)="onClick()">Click me!</button>' }) export class ChildComponent { @Output() myEvent = new EventEmitter<string>(); onClick() { this.myEvent.emit('Event triggered!'); } } ``` 然后在父组件中监听该事件: ```typescript import { Component } from '@angular/core'; @Component({ selector: 'parent-component', template: '<child-component (myEvent)="onMyEvent($event)"></child-component>' }) export class ParentComponent { onMyEvent(event: string) { console.log(event); } } ``` 2. 使用RxJS中的Subject类来创建可观察对象,然后在组件中订阅该可观察对象以监听事件。 例如,在组件中定义一个名为mySubject的Subject对象: ```typescript import { Component } from '@angular/core'; import { Subject } from 'rxjs'; @Component({ selector: 'my-component', template: '<button (click)="onClick()">Click me!</button>' }) export class MyComponent { mySubject = new Subject<string>(); onClick() { this.mySubject.next('Event triggered!'); } } ``` 然后在组件中订阅该可观察对象以监听事件: ```typescript import { Component } from '@angular/core'; import { MyComponent } from './my.component'; @Component({ selector: 'app-root', template: '<my-component></my-component>' }) export class AppComponent { constructor(private myComponent: MyComponent) { myComponent.mySubject.subscribe(event => console.log(event)); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值