在我的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响应。我想让我的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>
更好的是,我将设置一个Observable,当浏览器从一个范围转换到下一个范围时发出:
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
你可以使用fromEvent
RxJS的运算符:
const $resizeEvent = Observable.fromEvent(window, 'resize')
.map(() => {
return document.documentElement.clientWidth;
})
.debounceTime(200)
$resizeEvent.subscribe(data => {
this.width = data;
});
谢谢你的提示。我不知道
fromEvent
。这些事件是RxJS专有的,还是可以通过这种方式将任何JS事件转换为Observable?我想这仅适用于DOM事件
这是一个很好的提示,Plunker也是如此。我会尝试的。这是使答案更有用的链接:reactx.io/rxjs/class/es6/…
我用了你的解决方案。虽然没有必要使用
map
。fromEvent
可以接受第三个参数,该函数返回您希望Observable发出的函数。请参阅plnkr.co/edit/lgkRt8nNMScPOH7QmrBS?p=preview谢谢,非常优雅的解决方案!只是一件事:在现代的角度版本中,您应该使用以下方法从Event,map和debounceTime导入:stackoverflow.com/questions/50571550/…