角度2:检测浏览器宽度和更新模型的变化

Question

在我的Angular 2应用程序中，我根据浏览器窗口的宽度改变样式。以下是一个示例(SCSS)：

.content{
    /*styles for narrow screens*/
    @media (max-width: 750px){
        background-color:beige;
    }
    /*styles for medium screens*/
    @media (min-width: 751px) and (max-width: 1200px) {
        background-color:red;
    }
    /*styles for wide screens*/
    @media (min-width: 1201px) {
        background-color:brown;
    }   
}

这使我的UI响应。我想让我的角度组件知道哪个宽度间隔是当前的：

/* Returns which of the CSS width intervals is current*/
getWidthRange(){
    let pixelWidth = ...; //what goes here?

    if(pixelWidth < 251) return "small";
    if(pixelWidth < 451) return "medium";
    return "large"; 
}   

组件将调用此函数并根据宽度调整其行为。例如，下面的模板将在更宽的屏幕上显示更多的内容：

<div>
    {{getWidthRange()==='small'? shortText : longText}}
</div>

更好的是，我会设置一个可观察到的，当浏览器从一个范围转换到另一个范围时发出的：

widthRangeChanges = Observable.create( observer => 
    {       
        // ? how to detect when width changes
        let oldRange = '...';
        let newRange = '...';
        if(newRange!==oldRange) observer.next(newRange);
    }
).share(); //all subscribers share same output channel

然后，当接收到新的范围时，组件可以订阅widthRangeChanges和更新模型值。如何在Angular 2中获取这些信息？

Angular 2 rc-6，typescript 2.0.2，rxjs 5 beta 11

Answer 1

您可以使用fromEvent运算符的RxJS：

 const $resizeEvent = Observable.fromEvent(window, 'resize')
   .map(() => {
     return document.documentElement.clientWidth;
   })
   .debounceTime(200)

   $resizeEvent.subscribe(data => {
     this.width = data;
   });

柱塞实例

Answer 2

模板

<div (window:resize)="onResize($event)"></div>

export class AppComponent {            
      onResize(event) {
        console.log(event);
        console.log("width:" + event.target.innerWidth);
        console.log("height:" + event.target.innerHeight);

        this.pixelWidth = event.target.innerWidth;
      }

      getWidthRange(){
         if(this.pixelWidth < 251) return "small";
         if(this.pixelWidth < 451) return "medium";
         return "large"; 
      }
}

Answer 3

getWidth() {
    return Math.max(
      document.body.scrollWidth,
      document.documentElement.scrollWidth,
      document.body.offsetWidth,
      document.documentElement.offsetWidth,
      document.documentElement.clientWidth
    );
}