在我的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-6
,typescript 2.0.2
,rxjs 5 beta 11
感谢您的提示。我不知道'fromEvent'。这些事件是RxJS专有的,还是我可以通过这种方式将任何JS事件转变为Observable? – BeetleJuice
我想它只适用于DOM事件 – yurzui
这是一个很棒的提示,同样也是Plunker。我会试试看。这里是一个链接,使答案更有帮助:http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromEvent – BeetleJuice