angular的滚动检测和窗口大小变化检测

滚动检测

  // 监听滚动事件
  scrolling: any
  ngOnInit() {
    this.scrolling = fromEvent(window, ‘scroll‘) // fromEvent(element,event)
      .subscribe((event) => { // 订阅
        this.onScroll()
      })
  }
  onScroll () {
    this.scrollTop = document.documentElement.scrollTop
    this.elementScrollTop = this.height
    // console.log(this.scrollTop)
    if (this.scrollTop >= (this.elementScrollTop)) {
      this.nav.nativeElement.style.cssText = "position:fixed;z-index:2;top:0;width:102%;"
    } else {
      this.nav.nativeElement.style.cssText = "position:relative;"
    }
  }

窗口大小变化

  // 监听窗口大小变化
  resized: any
  ngOnInit() {
    this.sliderHeight.emit(this.slider.nativeElement.offsetHeight)
    this.resized = fromEvent(window, ‘resize‘)
    .subscribe((event)=>{
      this.sliderHeight.emit(this.slider.nativeElement.offsetHeight)
    })
  }

原文地址:https://www.cnblogs.com/foreversimon/p/12236932.html

时间: 2024-08-30 13:36:11

angular的滚动检测和窗口大小变化检测的相关文章

Vue && Angular 双向绑定检测不到对象属性的添加和删除

由于ES5的限制 Vue  && Angular 双向绑定检测不到对象属性的添加和删除  还有数组增加索引.这些改变不会触发change事件.Vue是因为实例化的时候已经把各个属性都setter和getter进去了. 两个实现的机制不一样.故解决方案也不一样. 详情查看:https://cn.vuejs.org/v2/guide/list.html#对象更改检测注意事项 Angular解决方案: 可以手动调用$apply()方法,会再自动轮询一遍 Vue解决方案: 使用vm.$set(对象

angular脏值检测策略

Angular默认情况下保守,当某个节点发生更改时,每次检查每个组件,如下图 我们发现每次变化检测都是从根组件开始,从上往下执行.虽然 Angular 2 优化后的变化检测执行的速度很快,每毫秒几十万次,但我们能否只针对那些有变化的组件才执行变化检测或灵活地控制变化检测的时机呢 ? 答案是有的,接下来我们看一下具体怎么进行优化. 先来一个简单的例子: app.component.ts import { Component } from '@angular/core'; @Component({

Angular 4 变更检测机制 ChangeDetectorRef 使用方法

1 import {ChangeDetectorRef} from "angular2/core"; //引入ChangeDetectorRef定义 2 constructor(public changeDetectorRef:ChangeDetectorRef) { //注入当前组件的ChangeDetectore 3 this.cd = cd; 4 this.records = []; 5 } 6 barcodeScanner() { 7 var self = this; 8 co

Angularjs(1.x)和Angular(2+)数据脏检测之间的区别

转2篇个人认为写的很好的: Angularjs(1.x)  http://www.cnblogs.com/likeFlyingFish/p/6183630.html Angular(2+)  https://blog.csdn.net/u011256637/article/details/71056731?utm_source=itdadao&utm_medium=referral 以及总结:(原出处:https://blog.angular-university.io/how-does-ang

成为优秀Angular开发者所需要学习的19件事

一款to-do app基本等同于前端开发的"Hello world".虽然涵盖了创建应用程序的CRUD方面,但它通常只涉及那些框架或库也能做到的皮毛而已. Angular看起来似乎总是在改变和更新 - 但实际上,还是有一些事情仍然保持不变.以下是关于Angular所需要学习的核心概念的概述,以便大家可以正确地利用JavaScript框架. 说到Angular,我们需要学习很多东西,很多人被困在初学者的圈子里,仅仅是因为不知道去哪里搜索或者应该搜索什么关键词.下面我们会说到的这个指南(也

Angular数据双向绑定

Angular数据双向绑定 AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 一.什么是数据双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-control

Angular概念纵览

Conceptual Overview Template(模板): HTML with additional markup (就是增加了新的标记的HTML) Directive(指令): extend HTML with custom attributes and elements (给HTML增加自定义属性和元素) Model(模型): the data shown to the user in the view and with which the user interacts (与用户交互

Angular 4+ Http

HTTP: 使应用能够对远端服务器发起相应的Http调用: 你要知道: HttpModule并不是Angular的核心模块,它是Angualr用来进行Web访问的一种可选方式,并位于一个名叫@angual/http的独立附属模块中:也就是说:使用http之前要引入此模块; 1.基本使用: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; impo

数据的双向绑定 Angular JS

接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="CounterCtrl"> &