首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

onResize事件在我的代码中不起作用,但在angular中有一个小的变化就能很好地工作

onResize事件是一个在浏览器窗口大小改变时触发的事件。它通常用于响应页面布局的变化,以便进行相应的调整。

在你的代码中,如果onResize事件不起作用,可能有以下几个原因:

  1. 事件绑定问题:请确保你已经正确地绑定了onResize事件。在前端开发中,可以使用addEventListener方法来绑定事件。例如,如果你想在窗口大小改变时触发onResize事件,可以使用以下代码:
代码语言:txt
复制
window.addEventListener('resize', onResize);
  1. 事件处理函数问题:请确保你已经正确地定义了onResize事件处理函数,并且该函数能够正确地执行所需的操作。你可以在onResize函数中编写你需要执行的代码。例如,如果你想在窗口大小改变时打印窗口的宽度和高度,可以使用以下代码:
代码语言:txt
复制
function onResize() {
  console.log('窗口宽度:', window.innerWidth);
  console.log('窗口高度:', window.innerHeight);
}
  1. Angular中的变化:你提到在Angular中有一个小的变化就能很好地工作。在Angular中,可以使用HostListener装饰器来监听宿主元素的事件。如果你想在组件中监听窗口大小改变事件,可以使用以下代码:
代码语言:txt
复制
import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-your-component',
  template: '...',
})
export class YourComponent {
  @HostListener('window:resize')
  onResize() {
    // 在这里编写你需要执行的代码
  }
}

这样,当窗口大小改变时,Angular会自动调用onResize方法。

总结起来,如果onResize事件在你的代码中不起作用,你需要检查事件绑定是否正确、事件处理函数是否正确定义,并且在Angular中使用HostListener装饰器来监听窗口大小改变事件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

关于 Chrome 浏览器 onresize 事件 Bug

写插件时用到了 onresize 事件反复测试后发现该事件 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作...bug 吧,估计他们工程师认为浏览器打开时也算窗口发生了变化。...好了,废话不多说,直接贴代码,按照之前做法,还是先将代码折叠起来,请大家以自己方式解决一下,或许比我方法更好,欢迎留言。...,至少想要从根本上也就是 Chrome 浏览器打开时就禁止 onresize 事件是不可能。...最后贴一下插件地址 https://github.com/nzbin/CardShow,之前文章也介绍了该插件其它一些问题,感兴趣朋友可以点此查看。

98860

单页应用(SPA)开发 Top 10 框架

多年以来,我们苦逼使用原生 JavaScirpt 和 jQuery 开发复杂界面,开发和维护苦真是一言难尽。 框架能够让开发者抽出更多精力专注交互功能上,不用太操心代码结构和组织。...用户界面上戳戳点点或是输入点什么时候,改变了应用 view,此时 model(JavaScript objects) 会跟随着 view 一起发生变化,model 代码逻辑得到执行,最终将更新...只更新那些发生变化 DOM 节点而不是重绘完整 DOM 树。 React 另一个优势在于响应式组件带来了很好重用性,React 组件库创建后可以多个项目中共用,也能供大众使用。...Ember 想要将 Angular 双向绑定和 React 服务端渲染优点继承过来。Ember 社区使用这种方式持续不断给它增加优秀功能,十分确信 Ember 会一直流行下去。...服务端代码运行在 nodejs 上,使用 MeteorJS 就能操作数据库,全都是 JavsScript, MeteorJS 是实时 web 应用。

4.3K40
  • Angular12个经典问题,看看你能答对几个?(文末附带Angular测试)

    Angular 2路由工作原理是什么? 路由是能够让用户视图/组件之间导航机制。Angular 2简化了路由,并提供了模块级(延迟加载)下配置和定义灵活性。 ...什么是事件发射器?它是如何在Angular 2工作Angular 2不具有双向digest cycle,这是与Angular 1不同。...Angular2,组件中发生任何改变总是从当前组件传播到其所有子组件。如果一个子组件更改需要反映到其父组件层次结构,我们可以通过使用事件发射器api来发出事件。...因为shadow DOM本质上是静态,同时也是开发人员无法访问,所以它是一个很好候选对象。因为它缓存DOM将在浏览器呈现得更快,并提供更好性能。...此外,还可以相对很好管理shadow DOM,同时检测Angular 2应用改变,并且可以有效管理视图重新绘制。

    17.3K80

    2032 年了,面试官居然还在问三大框架响应式区别……

    响应式三位一体 认为迄今为止,在行业中有三种基本响应式方法: 基于值(Value-based);即脏检查(Angular、React、Svelte) 基于 Observable:(Angular...但关键是它只是一个非可观察值,以一种不允许框架在值发生变化时知道(观察)方式存储 JavaScript 。...Angular( Signal 之前)=> 隐式依赖于zone.js来检测状态可能已发生变化时机(由于依赖于zone.js隐式检测,它比严格所需更频繁运行变更检测)。...但我喜欢他们发展方向 - 在我看来是正确方向。 权衡 尽管我有自己喜好,但所有方法都有优点和缺点,因此存在权衡。让我们先看看优点: 基于值: 它可以正常工作:值为基础系统"就能工作"。...你不必将对象包装在特殊容器,它们易于传递,并且易于进行类型推断(TypeScript)。 难以犯错:作为"就能工作"推论,它很难掉入响应式陷阱。

    33530

    Angular React Vue应该选择什么?

    文档中有一些实验性 API 被标记为较短弃用期。目前还没有官方公告,但根据这篇文章,Angular 团队已经宣布了以 Angular 4 开始长期支持版本。...Vue 1.x 到 2.0 更新过程对于一个应用程序来说应该很容易 - 开发者团队已经声称 90% API 保持不变。控制台上有一个很好升级 - 诊断迁移 - 辅助工具。...JSX 对于开发来说是一个很大优势,因为代码写在同一个地方,可以代码完成和编译时更好检查工作成果。当你 JSX 输入错误时,React 将不会编译,并打印输出错误行号。...这似乎是对于关注分离权衡 - 模板,脚本和样式一个文件但在三个不同有序部分。这意味着你可以获得语法高亮,CSS 支持以及更容易使用预处理器(如 Jade 或 SCSS)。...方法”:React 如果你喜欢真正干净代码:Vue 如果你想要最平缓学习曲线:Vue 如果你想要最轻量级框架:Vue 如果你想在一个文件中分离关注点:Vue 如果你一个工作,或者有一个团队

    2.9K20

    一个Angular 5教程:一步一步指导实现你一个Angular 5应用程序

    Angular一个完全集成框架,可以让您快速开始项目工作,无需考虑选择哪个库以及如何处理日常问题。认为Angular是作为前端,就像RoR是作为后端。...或者,您可能已经在所有那些华丽AngularJS演示中看到了它,您可以在其中输入要输入值并为我们更新页面内容。 这里有一个有趣技巧:Angular,双向数据绑定已经不再适合我们了。...我们正在看到RxJS行动。我们来讨论一下。猜你们至少都知道一些关于承诺和构建异步代码内容。承诺处理单一事件。POST例如,我们要求浏览器创建一个承诺。...RxJS使用Observable来处理事件流。想想像这样:我们刚刚实现了我们表单发生变化时调用代码。如果我们用承诺处理用户更改,则只有第一个用户更改会在我们需要重新订阅之前处理。...它代码片段Actions或多或少与我们缩减器相同,但它不是我们状态改变某些内容,而是实际发送API请求,并根据结果派发新代码Actions。与往常一样,展示你比告诉你更简单。

    42.6K10

    6 大主流 Web 框架优缺点对比:15篇前端热文回看

    以下是在过去一年非常值得关注十大事件整理,主要参考了国内外一些报道和文章,希望能对大家思考 2018 年趋势和走向上有所帮助。欢迎指正、评论和补充。...48 个有用 JavaScript 代码片段,该用户代码可以让程序员 30 秒甚至更少时间内理解这些经常用到基础算法,来看看这些 JavaScript 代码都传达出了什么吧!...这其中一些小技巧低版本是没有的,所以建议大家用最新版,目前最新版是62,版本很重要,如果发现有些技巧不起作用,请先查看浏览器版本。...这里提一个小点,我们在业务开发过程,经常会重复用到 日期格式化、 url参数转对象、 浏览器类型判断、 节流函数等一类函数,这些工具类函数,基本上每个项目都会用到,为避免不同项目多次复制粘贴麻烦,...《一篇真正教会你开发移动端页面的文章(一)》 从工作以来,开发一直都是移动端页面,只有偶尔去开发几个PC端页面,现在是一个移动端时代,移动先行已经深入骨髓,作为一个web前端开发,如果你还在为如何开发移动端页面而迷茫

    1.1K60

    前端react面试题(边面边更)

    相互关联且需要对照修改代码被进行了拆分,而完全不相关代码却在同一个方法组合在一起。如此很容易产生 bug,并且导致逻辑不一致。多数情况下,不可能将组件拆分为更小粒度,因为状态逻辑无处不在。...(3)难以理解 class除了代码复用和代码管理会遇到困难外,class 是学习 React 一大屏障。我们必须去理解 JavaScript this 工作方式,这与其他语言存在巨大差异。...还不能忘记绑定事件处理器。没有稳定语法提案,这些代码非常冗余。大家可以很好地理解 props,state 和自顶向下数据流,但对 class 却一筹莫展。...万一下次别人要移除它,就得去 mixin 查找依赖多个 mixin 可能存在相同命名函数,同时代码组件也不能出现相同命名函数,否则就是重写了,其实一直觉得命名真的是一件麻烦事。。...,而是给react用,大概作用就是给每一个reactNode添加一个身份标识,方便react进行识别,重渲染过程,如果key一样,若组件属性有所变化,则react只更新组件对应属性;没有变化则不更新

    1.3K50

    实战 | Change Detection And Batch Update

    带着这两个问题,将简要分析一下React、Angular1、Angular2及Vue实现机制。...到此我们可以得出这样一个结论: React调用方法连续setState走是批量更新,此外走是连续更新 说到这里,有些人可能会有这样一个疑惑: setTimeout也是handleClick...综上,说setState是异步需要加一个前提条件,React调用方法执行,这时我们需要通过回调获取到最新state 相信这个道理大家不难理解,因为事件和生命周期方法都是React调用,它想怎么玩就怎么玩...新手常碰到一个问题就是为啥下面的代码不起作用。...异步更新队列 每当观察到数据变化时,Vue就开始一个队列,将同一事件循环内所有的数据变化缓存起来。如果一个watcher被多次触发,只会推入一次到队列

    3.2K20

    为什么人们不喜欢 PHP?

    同样,使用 npm,您后端项目也会留下非常足迹;您可以服务器上运行它们,也可以不同云提供商处使用无服务器功能。...JavaScript 是事件驱动,带有允许异步活动事件循环,与同步运行 JavaScript 代码(每行一次运行一个)不同,JavaScript 可以一次运行代码多个部分,从而防止 JavaScript...JavaScript 和 PHP 都可以适应不同需求,但特别是,JavaScript 可以广泛平台上很好工作,不需要太多额外工作。...协作方面,我会说 JavaScript 项目上与团队合作更容易,主要是因为您用来完成工作工具很少,随着在线编码平台和环境出现,这变得更加容易,如果您想在 PHP 项目上进行协作,则必须先设置一个工作环境...个人喜欢项目中使用 JavaScript,喜欢可以轻松将技能从 React 转移到后端 Node.js API 技能,直接在浏览器运行代码也很棒,可以轻松不同平台上启动和运行 JavaScript

    88310

    前端开发:这10个Chrome扩展你不得不知

    您可以检查React组件属性和状态,随意更改属性和状态,并查看所作变化组件树传递过程。 4. JSONView ? 浏览器通常不太擅长显示JSON数据。...Web Developer会将工具栏添加到您浏览器。这个工具栏包含许多方便工具,程序员和设计人员都可以日常工作中使用它们,从而提高工作效率。...这是一个很好方法,可以加快发现、复制和粘贴颜色所需时间。 9. CSSPeeper 另一个检查和复制元素样式出色工具。...浏览网页时,通常吸引眼球是页面中正在使用字体。当我对某个文字感兴趣想要查看其使用字体时,我会下意识单击鼠标右键以打开开发人员工具,查看它代码。但是,这样还是太繁琐了。...它使您在把鼠标悬停在文本上就能快速查看它使用字体。 结论 以上只是基于我自己理解,这些扩展是工作更加轻松快捷。 如果您对上面的内容有任何补充,欢迎评论告诉,谢谢!

    2.4K10

    Angular v18 现已推出!

    改进框架同时,我们确保所有现有的 API 继续按预期工作,并且我们引入 Angular 所有新内容都有一个很好互操作性故事。Zoneless 是我们互操作性方法一个例子。...今天,我们很高兴与大家分享, Google.com 上运行核心库之一——事件调度(以前称为 jsaction)现在在 Angular monorepo 。...从 v18 开始使用事件调度,Angular 将开始记录用户事件。一旦应用程序被水化,事件调度就会重播它们,我们最终购物车中有六件商品。... Angular 中使用事件调度进行事件回放事件重播功能在开发者预览版 v18 可用。...本节想借此机会回顾一下现在,并庆祝我们所处位置。

    23110

    JavaScript框架四个时代

    经过一番研究和原型设计,说服了经理,可以使用当时刚开始出现全新JS框架,它能做到这些事项。 选择一个框架实际上是 Angular 1。...这就是为什么我们今天标准最终实现了这两种方式,但在这之前,我们需要使用库来编写能在两种浏览器上使用代码。 这些库主要用于制作小型、独立用户界面组件。...基于组件应用程序消除了完成工作所需大部分抽象概念,并且明显简化了代码生命周期--一切都与组件生命周期而不是应用程序生命周期联系在一起,这意味着作为一个开发人员,你要考虑事情要少得多。...使用像React和Vue这样框架,你可以一次一个小部件或组件将它们一小部分放入现有的应用程序,允许开发人员增量地迁移他们现有的代码。...仍然经常遇到一个网站,它不能正确做路由或很好地处理其他细节,这绝对是令人沮丧。 但另一方面,现有的第一代全服务框架在解决这些问题方面也做得不是很好。部分原因是由于大量技术债务包袱。

    50230

    JavaScript框架四个时代

    经过一番研究和原型设计,说服了经理,可以使用当时刚开始出现全新JS框架,它能做到这些事项。 选择一个框架实际上是 Angular 1。...这就是为什么我们今天标准最终实现了这两种方式,但在这之前,我们需要使用库来编写能在两种浏览器上使用代码。 这些库主要用于制作小型、独立用户界面组件。...基于组件应用程序消除了完成工作所需大部分抽象概念,并且明显简化了代码生命周期--一切都与组件生命周期而不是应用程序生命周期联系在一起,这意味着作为一个开发人员,你要考虑事情要少得多。...使用像React和Vue这样框架,你可以一次一个小部件或组件将它们一小部分放入现有的应用程序,允许开发人员增量地迁移他们现有的代码。...仍然经常遇到一个网站,它不能正确做路由或很好地处理其他细节,这绝对是令人沮丧。 但另一方面,现有的第一代全服务框架在解决这些问题方面也做得不是很好。部分原因是由于大量技术债务包袱。

    56420

    Angular v8 发布!来看看有什么新功能

    本文中,将介绍 Angular 8 和 Angular CLI 8 最重要新功能。文中例子可以 GitHub 上找到。...由于 Angular 大量底层部分已经为此进行了更改,因此 Angular 团队特别注意与以前 Angular 版本兼容性:切换到 Ivy 之后,现有的程序应该能够像以前一样工作。...通过发送消息与浏览器选项卡线程进行通信。 虽然 Web worker 本身与 Angular 无关,但在构建过程必须考虑它们。目标是为每个 Web worker 提供一个 bundle 包。...此任务由新 Angular CLI 完成。 为了说明这个新功能,将通过实现所谓 “n 皇后问题” JavaScript 进行说明。这个想法是棋盘上每行放一个皇后,而不能相互公鸡。...它通过消息事件接收结果。 最后 CLI 负责将工作脚本正确转换和捆绑。

    3K30

    「前端架构」React,Angular还是Vue,太难选了?看完秒懂。

    框架设计 Vue和Angular共享类似的设计,尽管Angular一个复杂平台,而不仅仅是一个库。另一方面,React具有独特设计,具有单向数据绑定和虚拟DOM。...应用程序代码广泛使用decorator为Angular提供额外元数据。 对于视图,它有自己模板语言,带有指令和绑定标记,可以根据数据动态呈现HTML。...它们反应性指南中有完整记录。 作为最年轻框架,Vue缺乏经验丰富开发人员,学习资源有限。不过,生态系统本身相当广泛。...它与React基本上是生态系统兼容,这意味着为React设计第三方npm包组件也应该在Preact工作关于从React切换指南中,它们涵盖了许多常见迁移问题。...React是一个很好全能者。由于单向数据流,应用程序逻辑始终保持清晰。组件提供了高级别的代码重用和较低更改成本。

    6.3K40

    使用TypeScript两年后,还值得吗?

    这是一个关于使用TypeScript日常工作感受到优缺点总结。想描述一下使用TypeScript最糟糕体验,另一方面,也要说一下认为最有用功能。...右侧 - VS Code 立即通知你代码错误。 ? 左侧 - 一个类错误实现了用户扩展接口(参见上一个屏幕)。右边 - 描述错误信息.. 类 ES6中有类,所以你可能之前用过它。...你当然可以翻源码,过一遍代码然后找到有用信息(假设你代码总是简洁),但在你喜欢编辑器中将鼠标hover到函数名上就能看到你要信息岂不更好?...当你团队工作时,有时候你是唯一前端开发人员,在做.net或Java同事真的不喜欢看原生JavaScript。由于语言动态和简洁性,他们会觉得可读性很差,没有类型意味着没有提示。...特别是大型或缺乏经验团队。这就是为什么两年前选择了这个项目作为一个TypeScript应用 - 对react那套技术栈非常熟悉,所以这是一个学习一种有前途新语言很好机会。

    1.4K20

    Angular学习(01)-架构概览

    Angular模块,不仅可以项目结构上集中管理同一个模块代码文件,还可以为模块内代码提供一个运行上下文。...组件与模板 Angular ,最常接触应该就是组件了。 是这么理解,组件可以是你界面上看到任何东西,可以是一个页面,可以是页面上一个按钮。...TypeScript 文件某个变量直接进行绑定,后续这个变量值变化时,Angular 会自动去更新相应 DOM 属性,也就是说,原本那些操纵 DOM 代码Angular 帮我们做了,我们不用再自己去处理了...但在 Angular ,不用这么麻烦,直接在组件构造函数参数,声明某个服务类型参数即可。 指令 指令也是为组件服务,但是,是组件模板文件来使用。...以上,是当项目中有多模块时,处理方式。

    3.6K50

    Angular 1 vs. Angular 2 深度比较

    让我们看看这是如何达到: 目标:更易于推论 在当前版本 Angular ,我们有时不得已对应特定使用场景推论框架内部构建,比如必须推论应用事件初始化和摘要循环: Angular 1 没有摘要循环结束事件...简单Angular 指定代码可以透明激发一个Angular 2 摘要,如下是由一个 zone 组件激发示例: element.addEventListener('keyup', function...目标: 改进依赖注入 Angular 1 世界里,依赖注入构建多模块应用时是一项技术飞跃, 但是一些极端案例,如果不做出一些重要变化是不能解决这些问题。...Angular 2 将会作出怎样该进 而在 Angular 2 中有且仅有一种依赖注入机制: 构造函数通过类型注入。...目标:为服务器端渲染提供支持 支持服务器端渲染对于搜索引擎优化和用户感知体验来说是非常重要一个比较大型Angular 1 应用,即使使用了预先定义缓存模块,我们可以清楚看到当应用开始启动时

    2.8K100
    领券