Angular 当屏幕尺寸小于平板电脑视图（768*1024）时，如何显示警报框？

为了实现上述目标，即当屏幕大小小于（768*1024）时显示警报框，我如下面所示

@HostListener("window:resize", ["$event"]) 
onResize(event) {
     if (event.target.innerWidth < 1024 || event.target.innerHeight < 768) {
        alert( "outer height" + event.target.outerHeight + "," + event.target.outerWidth);
        alert("inner height" + event.target.innerWidth + "," + event.target.innerHeight);
    } 
}

@HostListener（“窗口：调整大小，[“$event”]”）
onResize（事件）{
if（event.target.innerWidth<1024 | | event.target.innerHeight<768）{
警报（“外部高度”+event.target.outerHeight+，“+event.target.outerWidth”）；
警报（“内部高度”+event.target.innerWidth+，“+event.target.innerHeight”）；
} 
}

我不确定哪一个和屏幕大小相似，我给出了内部高度，但还是有点不同

那么，我如何才能正确有效地执行上述操作呢

---

任何帮助都将不胜感激。谢谢

我认为对于您的用例，您需要使用outerHeight/outerWidth，因为它不受控制台面板打开或其他因素的影响。因此，它非常适合检查平板电脑和桌面电脑

为了提高效率，您应该使用Observable来监听window.resize事件，因为它允许您限制观察者逻辑

这里有一个例子（不是我的）

Observable.fromEvent（窗口“调整大小”）
.审计时间（100）/{
宽度：事件['currentTarget']。外径，
高度：事件['currentTarget']。外部高度
})
.filter（WindowsSize=>WindowsSize.width<1024 | | WindowsSize.height<768）
.订阅（（窗口大小）=>{
//只有当大小小于tablet view时，才会调用此回调
doSomeStuff（）；
})

我对上面的解决方案做了一点修改，然后它就完美地工作了，而且效率也很高

let windowDimensions = () => {
        let dimensions = {
            width: window.innerWidth,
            height: window.innerHeight
        };
        return dimensions;
    };

    constructor() {
            let resizeEvtObs = fromEvent(window, "resize")
            .pipe(debounceTime(1000),
                map(windowDimensions));

            resizeEvtObs.subscribe(val => {
                this.windowWidth = val.width;
                this.windowHeight = val.height; 
                if (console) {
                    console.log("Dimensions updated to", this.windowWidth, this.windowHeight);
                }
            });

        }

---

非常感谢您提供上述解决方案，因为我使用的是angular 6，所以我做了一些修改，效果很好！

let windowDimensions = () => {
        let dimensions = {
            width: window.innerWidth,
            height: window.innerHeight
        };
        return dimensions;
    };

    constructor() {
            let resizeEvtObs = fromEvent(window, "resize")
            .pipe(debounceTime(1000),
                map(windowDimensions));

            resizeEvtObs.subscribe(val => {
                this.windowWidth = val.width;
                this.windowHeight = val.height; 
                if (console) {
                    console.log("Dimensions updated to", this.windowWidth, this.windowHeight);
                }
            });

        }