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

Angular 2-有没有办法在调整窗口大小时完全重新初始化组件?

在Angular 2中,可以通过使用HostListener装饰器和window:resize事件来监听窗口大小的变化,并在窗口大小变化时重新初始化组件。

首先,在组件类中引入HostListener装饰器和Renderer2服务:

代码语言:txt
复制
import { Component, HostListener, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {

  constructor(private renderer: Renderer2) { }

  // 监听窗口大小变化事件
  @HostListener('window:resize')
  onWindowResize() {
    // 在窗口大小变化时重新初始化组件
    this.renderer.destroy();
    this.renderer.createElement('app-your-component');
  }

}

然后,在onWindowResize方法中,可以通过Renderer2服务来销毁当前组件并重新创建一个新的组件实例,从而实现完全重新初始化组件的效果。

需要注意的是,这种方法只能重新初始化组件的状态,而无法恢复到初始状态。如果需要恢复到初始状态,可以在组件中添加一个reset方法,将组件的状态重置为初始值,并在onWindowResize方法中调用该方法。

关于Angular 2的更多信息和相关的腾讯云产品推荐,你可以参考以下链接:

请注意,以上链接仅作为参考,具体的产品选择应根据实际需求进行评估。

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

相关·内容

前端三框架大杂烩

一、为什么前端会被vue,angular,react瓜分?   不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。如果有一个牛逼的前端,后端差不多只需要会增删改查的基本业务就能完全搞定一个web应用。...二、三框架的优缺点   我们主要从数据流、视图渲染、性能与优化、模块化组件化等四个方面来作比较1、数据流   Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。...ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

2.6K50

前端三框架vue,angular,react大杂烩

一、为什么前端会被vue,angular,react瓜分?    不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。如果有一个牛逼的前端,后端差不多只需要会增删改查的基本业务就能完全搞定一个web应用。...二、三框架的优缺点   我们主要从数据流、视图渲染、性能与优化、模块化组件化等四个方面来作比较 1、数据流   Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。...Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。... Angular1 中两者有不少相混的地方 React 一个 React 应用就是构建在 React 组件之上的。    组件有两个核心概念:props,state。

3K90
  • 前端三框架vue,angular,react大杂烩

    一、为什么前端会被vue,angular,react瓜分?    不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。如果有一个牛逼的前端,后端差不多只需要会增删改查的基本业务就能完全搞定一个web应用。...二、三框架的优缺点   我们主要从数据流、视图渲染、性能与优化、模块化组件化等四个方面来作比较 1、数据流   Angular 使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。...Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。... Angular1 中两者有不少相混的地方 React 一个 React 应用就是构建在 React 组件之上的。    组件有两个核心概念:props,state。

    2.1K60

    Angular 多项目管理

    平常的开发中,我们一个项目建立一个仓库,不仅维护起来难,而且那个"无穷"的 node_modules 也太尴尬了吧,多个项目多份 node_modules,要是同类型的项目,使用同份 node_modules...那么,我们有没有发现,整个默认的项目,配置的文件,其实都是放在字段 projects 下面。 哦,那么我们可以通过 projects 下面配置另外一个项目不就行了吗?...开始前,我们先看看项目 jimmy-demo 下的文件: 嗯~,我们参考该目录结构做下调整,并添加一个名为 app01 和 app02 的项目,并把默认的项目放在 app01。...调整后的 jimmy-demo 目录如下: 然后我们更改下 app01 angular.json 中文件,完整的文件见 app01 项目的 angular.json 文件 然后更改下 app01/...那么,我们依瓢画葫芦, angular.json 中进行配置项目 app02(感兴趣的读者自行尝试)。

    26330

    Angular2 之 结构型指令几个概念

    隐藏元素的利弊 当我们隐藏元素时,组件的行为还在继续。 它仍然附加子啊它所属于的DOM元素上,它仍然监听事件。angular会继续检查哪些能影响数据绑定的变更。...组件原本要做的哪些事情仍然进行!它还是占用着那么多的资源。 另外一方面,重新显示这个组件会很快。 组件以前的状态被保留着,并随时可以显示。...组件不用重新初始化,当然,该操作付出代价比较大! 移除元素组件 利 把ngIf设置为false,将会影响到组件的资源消耗。...弊 如果我们很快再次使用这个组件的时候,重建组件的代价是非常的。 当ngIf重新变成true的时候,angular重新创建该组件及其子树。angular重新运行每个组件初始化逻辑。...,Angular的控制下,DOM的效果是不同的。 ?

    3K20

    Ng-Matero V9 正式发布!

    Angular V9 已经二月份重磅发布,拖沓了一个月,Ng-Matero V9 也终于发布!其中大部分时间耗了 Material Extensions 的组件开发上。...虽然 ng-select 有 Material 的主题,但是直接使用的话,你会发现没办法展示错误信息。所有第三方表单组件都必须继承 form-field 类才能获得最佳交互体验。...扩展组件库 实话说 Angular Material 确实缺少一些比较常用的交互组件开发 Ng-Matero 的过程中,顺便开发了一套 Material Extensions 的组件库。...这套组件库的组件大致有以下三类: 完全独立开发的组件(e.g. alert) Angular Material 组件的二次封装(e.g. data-grid) 第三方组件的优化及包装(e.g. color-picker...其中还有很多的技术细节,比如焦点事件处理、判断是否 ShadowRoot 组件内、浏览器窗口的 blur 交互等。目前 color-picker 使用方式上设计的并不好,后期将会重构。

    1.3K20

    Angular 1 vs. Angular 2 深度比较

    让我们看看这是如何达到的: 目标:更易于推论 在当前版本的 Angular 中,我们有时不得已对应特定的使用场景推论框架内部构建,比如必须推论应用事件初始化和摘要循环: Angular 1 中没有摘要循环结束事件...重新运行变动检查,检查是否有更多的变化发生,重新运行监视器,等等 Angular 1 绑定运行的后果 结果是 DOM 一直同简单 Javascript 对象进行同步,尽管这样可以工作,但是这使得有时难以进行推论...当前还没有办法同一名字有两个不同实现的两个服务,这就会阻止用一个安全的方式从 Angular 1 实现延迟加载。...web component 的行为跟浏览器组件的行为类似,比如有 img 标签。 因此,页面初始化并且 Angular 介入之前,Angular 表达式将被传给组件,并直接作用于它。...Angular 2 最初版本发布临近时这会变得更加清晰,但是现在路由可能是一个主要的可行迁移办法

    2.8K100

    Angular CLI 创建你的第一个 Angular 示例程序

    要想使用 npm 来安装 CLI,请打开终端/控制台窗口,并输入下列命令: npm install -g @angular/cli 第二步:创建一个工作区和初始化应用 Angular 工作区 就是你开发应用的上下文环境...cd my-app ng serve --open ng serve 命令会自动启动服务器,并监视你的文件变化,当你修改这些文件时,它就会重新构建应用。...看,你的应用正在使用一条消息欢迎你: 第四步:编辑你的第一个 Angular 组件 组件 是 Angular 应用中的基本构造块。 它们屏幕上显示数据、监听用户输入,并根据这些输入采取行动。...作为初始应用的一部分,CLI 也会为你创建第一个 Angular 组件。它就是根组件,名叫 app-root。 打开....根据版本的不同,我们初始化的时候,发现 .css 文件的后缀名已经使用 styl 后缀名了。

    1.2K40

    React 困境与未来,何时迎来自己的“Angular.js 时刻”?

    为什么一定要这样调整?如果我们需要在组件树中深入访问获取的数据,由于于 useContext 已在服务端组件中被禁用 ,所以无法将 fetch 放置 React Context 当中。...现在若需要在组件树内的不同点处访问获取的数据,推荐方法是必要时执行重新获取,再通过 React 执行重复数据删除。 这个 fetch 函数还会默认缓存数据,无论响应缓存标头如何。...目前,调试 React 服务端组件的唯一方式就是借助 console.log。 服务端组件的认知模型与客户端 JS 完全不同,只有底层 JSX 保持不变。...所以哪怕大家精通 React 开发,面对服务端组件时还是得重新学习——除非您已经拥有丰富的 PHP 开发经验。...如果没有 React Context,那服务端组件就需要单独的依赖项注入容器(Dependency Injection Container,类似 Angular办法)。

    25210

    angular面试题及答案_angular面试

    ngOninit:初始化指令或组件angular第一次显示展示组件的绑定属性后调用,该方法只会调用一次 ngDocheck:检测 ngAfterContentInit:当把内容投影进组件之后调用,...:angular初始化组件及其子组件的视图之后调用,只调用一次,只适用于组件 ngAfterViewChecked:每次做完组件视图和子视图的变更检测之后调用,只适用于组件 ngOnDestroy:...当类被初始化之后,构造函数会被调用 ngOnInit ngOnInit 是angular中OnInit钩子的实现,用来初始化组件。...ngOnInit : angular 第一次显示数据绑定和设置指令、组件的输入属性之后,初始化指令、组件 所以从angular的生命周期看,constructor是执行在先的 所以既然ngOnchanges...使用场景 constructor 中不适合进行任何和组件通信类似的复杂操作,一般constructor中进行一些简单的初始化操作,比如依赖注入、变量初始化等。

    11.1K120

    Ionic4与Ionic3部分比较

    Ionic过去使用的典型Push/Pop风格导航仍然可用,您甚至可以直接通过Ionic的Web组件使用这种导航方式,但推荐的方法是使用Angular Router。...三、组件和指令的变更 Ionic为了更通用化,把原来的指令调整为更通用标准的属性方式,如icon-right调整为slot="end", large变成size="large",<button ion-button...action-sheet-controller loading-controller …… 前面2个一般是有自定义UI的,ionic3中是可通过自定义组件注入ViewController来关闭窗口,...ionic4中已经没有这个方法,改为通过监听事件或回调给外面的xxx-controller来关闭。...变化还是蛮的,旧的ionic3项目不太适合升级为ionic4,至于还学不学得动,自己考量吧,我觉得用vue+ionic4也是挺好玩的。

    7K10

    Angular Schematics 三部曲之 Add

    Angular Schematics 是非常强大的一个功能,可以快速初始化项目,也可以自定义组件模板。...Add 的用途 我目前见过的项目中,ng add 主要有两个用途: 初始化组件库(比如 angular material,ng-zorro,ngx-bootstrap) 初始化项目模板(比如 ng-alain...初始化组件库相对简单一点,有些库的 ng add 甚至等同于 npm install。 相比之下,初始化项目模板要复杂很多,不仅要对项目进行配置,还要对项目中的文件进行增删改等操作。...初始化项目的原始模板文件 删除 ng new 生成的重复文件(因为 schematic 无法自动替换文件) 把原始项目模板文件拷贝到项目目录 调整一下 package.json 和 angular.json...ng add 的测试比较麻烦,如果将模板安装到项目之后,再次测试需要重新初始化一个 ng 项目。

    1.4K10

    Ng-Matero 0.1 发布了!

    按照计划,首先要添加 schematics,也就是使用 angular cli 自动初始化项目。然后花了一周多的时间终于搞定了 schematics?。...接下来还会继续扩展 schematics 以及写一些 vscode 插件,整个项目还有很多需要完善的地方,不知道还有没有那么的精力。年龄了,已经明显感觉到心有余而力不足。...切记在新建 angular 项目的时候一定要选择 scss,因为没有做兼容处理,选择其它格式会有点问题,可以 angular.json 中修改主样式入口。...个人更倾向于项目之前初始化布局,而不是项目启动后再更改页面布局的参数。 ? 页面布局分为侧边栏导航和顶部导航两种,其它细节可以根据自己的需要自由选择配置。 侧边栏导航 ? 顶部导航 ?...因为 ng-matero 是基于 material 组件库,所以可以第一时间更新 ng 的最新功能?。

    66310

    前端三主流框架如何去选择?

    但是没办法,如果不写清楚需要熟悉Angular,你会收到一堆不匹配的简历。所以今天聊这三个框架我并不想说出类似于“React是最好的前端框架”这种话。...提供了响应式和组件化的视图组件,并且拥有强大的路由系统,React中淡化了HTML和CSS的模版应用,它通过JSX语法糖可以方便快捷的建立网页节点。...因此很多时候类库并不是所有功能都完全兼容React。...Angular Angular现在由Google团队维护的一个JS框架,它是AngularJS 1.X之后重新开发的全新框架,因此Angular不具有兼容AngularJS的能力。...它具有自己的DSL语言,可方便的HTML中实现逻辑判断、for循环等功能。Angular以模型、组件、模版、服务等等类似于Java和C++面向对象的概念,这也让后端开发者可以更容易的学习。

    1K20

    Angular的12个经典问题,看看你能答对几个?(文末附带Angular测试)

    ngOnChanges:当Angular设置其接收当前和上一个对象值的数据绑定属性时响应。 ngOnInit:第一个ngOnChange触发器之后,初始化组件/指令。...组件特定hooks: ngAfterContentInit:组件内容已初始化完成 ngAfterContentChecked:Angular检查投影到其视图中的绑定的外部内容之后。...此外,还可以相对很好地管理shadow DOM,同时检测Angular 2应用的改变,并且可以有效地管理视图的重新绘制。...其中,反应最为迅速的就是Wijmo,Wijmo Angular2 发布几个小时后就发布了支持 Angular2 正式版本的 Wijmo。...Wijmo 为每一个UI控件都提供了 Angular2 组件。所有 Angular2 组件都提供了完全声明性标记。

    17.3K80

    Vue.js 快速上手精华梳理-为什么选择Vue?

    主流框架 Vue是一个前端Javascript框架,与React Angular 并称为前端三主流框架 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。...Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。 程序人生 我们选择了这个 IT 行业,自然希望能够在这里走得更远。...成长的过程中,不可避免的会踩一些坑、走一些弯路,那么有没有办法可以避免少踩一些坑、少走一些弯路呢?万幸的是,答案是有的。...另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。...没有对比就没有差距 通过它们 GitHub 的 Star 历史和 NPM 的下载趋势图来看一下。 Angular、React 和 Vue 的 GitHub Star 历史: ?

    98530

    记录工作中遇到的各种问题(Bug,总结,记录)

    有个弹窗组件叫做 Layer.js,发现个问题是layer弹出层中播放视频,视频的全屏按钮失效 ? 没啥办法了,最后直接暴力地解决了 ? 23....中性能面板汇总可以看到,键盘按下和松开的时候,会触发Angular的keypress和keyup事件,每个耗时几百毫秒 解决办法就是对不需要绑定的数据,尽量不用Angular自建的绑定,换成普通方式就好...然后该独立窗口的DevTools中使用快捷键(如Ctrl+Shift+J)打开即可 ?...中检测不到插件的存在,从而初始化不了播放器 ?...当修改的时间变化比较小时(比如改变几分钟)能更新到正确的值 改变比较大时(比如改变几十分钟或几天),这个值一分钟左右才会更新出来 70.

    18.1K12

    一个巧妙设计,解锁 React19 初始化接口最佳实践,彻底摒弃 useEffect

    // 被 Suspense 包裹的子组件 const res = use(api) 只需要这两行代码,就可以非常简单的组件中请求接口并初始化页面了。...因为这种写法,当组件由于各种原因需要重新请求时,getMessage() 会冗余执行,它的执行就会请求接口,因此这种写法会造成大量的冗余请求。...这个思路的核心是利用 useEffect 的执行,来记录组件已经完成初始化,然后函数组件后续的执行中,就可以阻止 getMessage 的执行。...因此,一个比较自然的思考,就是想办法让 getMessage 只执行一次。...而这种小小的巧妙调整,结合我们把 promise 存储 state 的巧思,几乎就可以宣告 useEffect 异步请求的实现中,可以功成身退了。

    22210

    AngularDart 4.0 高级-生命周期钩子 顶

    生命周期序列 通过调用其构造函数创建组件/指令后,Angular特定时刻按以下顺序调用生命周期钩子方法: 钩子 作用和时机 ngOnChanges Angular重新)设置数据绑定输入属性时响应。...ngOnInit之前调用并且每当有一个或多个数据绑定输入属性发生变化时调用。 ngOnInit Angular首次显示数据绑定属性并设置指令/组件的输入属性后,初始化指令/组件。...ngAfterContentInit和后续的每次NgDoCheck之后调用。 组件独有的钩子。 ngAfterViewInit Angular初始化组件的视图和子视图之后进行响应,。...可以ngOnInit和routerOnActivate之间绘制一个平行线。 两者的前缀都是为了避免碰撞,并且组件初始化时都运行正确。...OnInit 使用ngOnInit有两个主要原因: 施工后不久执行复杂的初始化 Angular设置输入属性后设置组件 有经验的开发人员同意组件应该便于构建且安全。

    6.2K10
    领券