在原生脚本中设置屏幕大小限定符typescript和angular2,可以通过使用@HostListener
装饰器来监听窗口大小变化,并在组件中设置相应的屏幕大小限定符。
首先,在组件类中导入@HostListener
装饰器和Renderer2
服务:
import { Component, HostListener, Renderer2 } from '@angular/core';
然后,在组件类中定义一个变量来存储屏幕宽度:
screenWidth: number;
接下来,在组件的构造函数中注入Renderer2
服务:
constructor(private renderer: Renderer2) { }
然后,在组件的ngOnInit
生命周期钩子函数中初始化屏幕宽度,并添加窗口大小变化的监听器:
ngOnInit() {
this.screenWidth = window.innerWidth;
this.onResize();
}
在组件类中添加一个@HostListener
装饰器,用于监听窗口大小变化的事件:
@HostListener('window:resize', ['$event'])
onResize(event?) {
this.screenWidth = window.innerWidth;
// 根据屏幕宽度设置相应的屏幕大小限定符
if (this.screenWidth < 576) {
// 设置小屏幕的样式或逻辑
} else if (this.screenWidth >= 576 && this.screenWidth < 992) {
// 设置中等屏幕的样式或逻辑
} else {
// 设置大屏幕的样式或逻辑
}
}
通过以上步骤,我们可以在原生脚本中设置屏幕大小限定符typescript和angular2。根据屏幕宽度的变化,我们可以根据需要设置不同的样式或逻辑,以适应不同屏幕大小的设备。
领取专属 10元无门槛券
手把手带您无忧上云