使用查询监听器使Angular项目响应

Question

我正在寻找如何使我的angular项目自动检测和配置响应性的建议。

目前，我们正在使用一种具有诸如"；isMobile"；等等。该项目是有响应的，但不会自动检测到页面的响应或大小的变化。

我们希望它能够自动检测测量桌面、平板电脑或移动设备大小的变化，并自动更新页面对这些配置的响应，而无需手动重新加载页面。

欢迎任何想法或建议，请继续提出，因为这是一个大项目，谢谢。

下面是我们在项目中为此编写的一段代码的示例。

this.mobileQuery = media.matchMedia(`(max-width: ${MEDIA_BREAK_POINT}px)`);
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
this.isMobile = this.service.isMobile;
this.isTablet = this.service.isTablet;
this.isDesktop = this.service.isDesktop;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

Answer 1

当然是：

enum DeviceSize='Mobile' | 'Tablet' | 'Desktop';
deviceSize$=new BehaviorSubject<DeviceSize>(DeviceSize.Desktop);
contructor(){
this.initializeDeviceSize();
fromEvent(window, 'resize')
.pipe(
startWith(null),
debounceTime(1000),
)
.subscribe((c) => {
this.onDeviceSizeChanged();
});
}
initializeDeviceSize(){
this.setDeviceSize();
}
onDeviceSizeChanged(){
this.setDeviceSize();
}
setDeviceSize(){
//check device size is which one of DeviceSize Enum
if(isMobile){
this.deviceSize$.next(DeviceSize.Mobile);
}
else if(isTablet)
{
this.deviceSizse$.next(DeviceSize.Tablet);
}
else {
this.deviceSize$.next(DeviceSize.Desktop)
}
}