Angular2在Resize上获取窗口宽度

CSS

使用Angular2的开发者常常需要获取窗口的宽度来进行相应的布局调整或者其他操作。在Angular2中，我们可以通过监听窗口的resize事件来获取窗口的宽度。下面将介绍如何在Angular2中实现这一功能，并给出一个简单的案例代码。

获取窗口宽度的方法

在Angular2中，我们可以使用HostListener装饰器来监听窗口的resize事件。首先，在我们的组件中引入HostListener装饰器：

import { Component, HostListener } from '@angular/core';

然后，在组件类中添加一个方法，用来处理resize事件，并获取窗口的宽度：

@Component({

selector: 'app-my-component',

templateUrl: './my-component.component.html',

styleUrls: ['./my-component.component.CSS']

})

export class MyComponentComponent {

windowWidth: number;

@HostListener('window:resize', ['$event'])

onResize(event) {

this.windowWidth = event.target.innerWidth;

}

}

在上述代码中，我们定义了一个名为windowWidth的变量，用来保存窗口的宽度。然后，通过@HostListener装饰器监听窗口的resize事件，并在事件触发时调用onResize方法。在这个方法中，我们使用event.target.innerWidth来获取窗口的宽度，并将其赋值给windowWidth变量。

接下来，我们可以在组件的模板中使用windowWidth变量来展示窗口的宽度：

窗口宽度：{{ windowWidth }}

这样，当窗口的宽度发生变化时，我们就可以实时地获取到窗口的宽度并展示出来。

案例代码

下面是一个简单的案例代码，实现了在Angular2中获取窗口宽度的功能：

import { Component, HostListener } from '@angular/core';

@Component({

selector: 'app-my-component',

templateUrl: './my-component.component.html',

styleUrls: ['./my-component.component.CSS']

})

export class MyComponentComponent {

windowWidth: number;

@HostListener('window:resize', ['$event'])

onResize(event) {

this.windowWidth = event.target.innerWidth;

}

}

在上述案例代码中，我们创建了一个名为MyComponentComponent的组件，并在组件类中定义了windowWidth变量和onResize方法。通过@HostListener装饰器监听窗口的resize事件，并在事件触发时更新windowWidth变量的值。最后，在组件的模板中使用windowWidth变量来展示窗口的宽度。

通过以上的方法，我们可以在Angular2中获取窗口的宽度，并根据需要进行相应的操作。通过监听窗口的resize事件，并在事件触发时获取窗口的宽度，我们可以实时地获取到窗口的宽度并进行相应的处理。希望以上的介绍对您有所帮助，谢谢！

以上就是关于在Angular2中获取窗口宽度的方法及案例代码的介绍。通过监听窗口的resize事件，并在事件触发时获取窗口的宽度，我们可以实时地获取到窗口的宽度并进行相应的处理。希望以上的介绍对您有所帮助，谢谢！