アプリがモバイルであるかどうかを検出し、角度2の別のアプリに切り替えるにはどうすればいいですか？

Question

複雑なユーザーインターフェイスを使用してアプリケーションを構築しています。複雑で、実際には、私はionicを使って同じアプリのモバイルフレンドリーなバージョンを作成することはできないと思います。例えば、メディアクエリは私のCSSを変更することができますが、私はまったく新しい構造と新しいアプリケーションが必要になります。

理想的には、デスクトップ用の標準Angular2アプリとモバイル用Ionicアプリがあります。私はそれらの間にいくつかのコードを共有することができるように、同じプロジェクトフォルダにそれらを持っていることを好むでしょう。私はこれが可能かどうかも分かりません。

デバイスがモバイルで、別のアプリケーション/アプリケーションのルートをレンダリングする方法はありますか？

Answer 1

DynamicComponentLoaderを試してみてください。免責事項、Angular2 Alpha以来これを使用していません。しかし、私のアプローチは、画面の解像度を検出し、コンポーネントをメインテンプレートに動的にロードすることでした。小さなデバイスの場合、私はタブレイアウトを読み込み、応答の大きいグリッドを読み込んだ。解像度やデバイスタイプをより堅牢に検出するためには、ng2のようなものを検討する必要があります。 Angular2アルファで

（申し訳ありません例は日付である）

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; 

}); 
} 

}

解決サービスは：

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