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

Angular 9-如何在窗口大小改变时获得子元素的宽度?

在Angular 9中,可以通过使用@HostListener装饰器和ElementRef来监听窗口大小改变事件,并获取子元素的宽度。

首先,需要在组件的构造函数中注入ElementRef,以便在组件中使用它:

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

@Component({
  selector: 'app-your-component',
  template: `
    <div #childElement></div>
  `
})
export class YourComponent {
  constructor(private elementRef: ElementRef) {}

  // 监听窗口大小改变事件
  @HostListener('window:resize')
  onWindowResize() {
    // 获取子元素的宽度
    const childElementWidth = this.elementRef.nativeElement.querySelector('#childElement').offsetWidth;
    console.log('子元素宽度:', childElementWidth);
  }
}

在模板中,使用#childElement来标记子元素,以便在组件中获取它的引用。

然后,在组件中使用@HostListener装饰器来监听窗口大小改变事件。当窗口大小改变时,onWindowResize方法会被调用。

onWindowResize方法中,通过this.elementRef.nativeElement.querySelector('#childElement').offsetWidth来获取子元素的宽度。可以根据实际情况修改选择器来获取特定的子元素。

最后,可以在控制台中打印子元素的宽度,或者根据需要进行其他操作。

请注意,以上代码中没有提及具体的腾讯云产品,因为Angular是一个开源框架,与云计算品牌商无关。但是,你可以根据实际需求选择适合的腾讯云产品来部署和托管你的Angular应用程序。

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

相关·内容

31分41秒

【玩转 WordPress】腾讯云serverless搭建WordPress个人博经验分享

领券