2016-09-17 93 views
1

在我的Angular 2应用程序中,我根据浏览器窗口宽度更改样式。这里是一个示例(SCSS):角度2:检测浏览器宽度和更新模型的更改

.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响应。我希望我的Angular组件知道哪个宽度间隔是当前的:

/* 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-6typescript 2.0.2rxjs 5 beta 11

回答

10

您可以使用fromEvent操作RxJS的:

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

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

Plunker Example

+0

感谢您的提示。我不知道'fromEvent'。这些事件是RxJS专有的,还是我可以通过这种方式将任何JS事件转变为Observable? – BeetleJuice

+0

我想它只适用于DOM事件 – yurzui

+0

这是一个很棒的提示,同样也是Plunker。我会试试看。这里是一个链接,使答案更有帮助:http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent – BeetleJuice

3

模板

<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"; 
     } 
} 
+0

我从来没有见过这种'(window:resize)'事件绑定表示法。这是标准的'Angular 2'吗? (任何官方文档的链接将有所帮助) – BeetleJuice

+0

我曾经在某个地方读过它的测试版本(现在我不记得引用)。稍后在我的项目中实现。我想文档尚不可用。 – micronyks