我正在使用复杂的用户界面构建应用程序。事实上,如此复杂,我认为我不能使用ionic来简单地创建同一个应用程序的移动友好版本。例如,媒体查询可以改变我的CSS,但我需要一个全新的结构,因此需要一个新的应用程序。
理想情况下,我希望有一个标准的Angular2应用程序用于桌面和Ionic app for mobile。我更喜欢将它们放在同一个项目文件夹中,以便我可以在它们之间共享一些代码。我甚至不确定这是否可行。
我是否有办法检测设备是否可移动并呈现不同的应用程序/应用程序根目录?
答案 0 :(得分:5)
您可能想尝试使用DynamicComponentLoader。免责声明,自Angular2 Alpha以来,我一直没有使用过它。但是,我的方法是检测屏幕分辨率并将组件动态加载到主模板中。对于小型设备,我加载了一个标签布局,以及更大的响应网格。您可以查看类似于ng2的响应,以便更灵活地检测分辨率和设备类型。
在Angular2 Alpha中(抱歉的例子已过时)
模板:
<div>
<div #location></div>
</div>
组件方法:
setLayout(pSize:string) {
this.removeAll();
if(pSize === 'xs') {
console.log('loading layout ' + pSize);
this._dcl.loadNextToLocation(TabbedLayout, this._e).then((ref) => {
ref.instance._ref = ref;
this._children = ref;
});
} else {
console.log('loading grid ' + pSize);
this._dcl.loadNextToLocation(GridLayout, this._e).then((ref) => {
ref.instance._ref = ref;
this._children = ref;
});
}
}
解决方案服务:(推荐类似ng2响应而非我的测试服务)
import {Injectable} from '@angular/core';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/pluck';
import 'rxjs/add/operator/distinctUntilChanged';
@Injectable()
export class ResizeSvc {
width$: Observable<number>;
height$: Observable<number>;
layout$: Observable<string>;
constructor () {
let windowSize$ = new BehaviorSubject(this.getWindowSize()); // most recent and subsequent values
this.width$ = windowSize$.pluck('width').distinctUntilChanged();
this.height$ = windowSize$.pluck('height').distinctUntilChanged();
this.layout$ = windowSize$.pluck('layout').distinctUntilChanged(); // only observed distinct changes, e.g sm -> md -> lg, not lg -> lg -> lg
Observable.fromEvent(window, 'resize')
.map(this.getWindowSize)
.subscribe(windowSize$);
}
getWindowSize() {
var size = 'na';
if(window.innerWidth < 768) {
size = 'xs';
} else if (window.innerWidth < 992) {
size = 'sm';
} else if(window.innerWidth < 1200) {
size = 'md'
} else {
size = 'lg';
}
return {
height: window.innerHeight,
width: window.innerWidth,
layout: size
};
}
}