angular - 如何检测应用程序是否可移动并使用 angular2 切换到其他应用程序

Question

我正在构建一个具有复杂用户界面的应用程序。如此复杂，事实上，我不认为我可以使用 ionic只需创建同一应用程序的移动友好版本。例如，媒体查询可以改变我的 css，但我需要一个全新的结构，因此需要一个新的应用程序。

理想情况下，我希望有一个用于桌面的标准 Angular2 应用程序和一个用于移动设备的 Ionic 应用程序。我更愿意将它们放在同一个项目文件夹中，以便我可以在它们之间共享一些代码。我什至不确定这是否可能。

有没有一种方法可以检测设备是否为移动设备并呈现不同的应用程序/应用程序根目录？

Answer 1

您可能想尝试 DynamicComponentLoader。免责声明，自 Angular2 Alpha 以来我就没有使用过它。但是，我的方法是检测屏幕分辨率并将组件动态加载到主模板中。对于小型设备，我加载了选项卡布局，对于较大的设备，我加载了响应式网格。您可以研究 ng2-responsive 之类的东西，以更可靠地检测分辨率和设备类型。

在 Angular2 Alpha 中(抱歉示例已过时)

Plunker Example

模板:

<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;

});
}

Resolution Service:(推荐使用 ng2-responsive 之类的东西，而不是我的测试服务)

    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
  };
}
}