parametros - pasar datos entre componentes angular 5

¿Cómo puedo detectar si una aplicación es móvil y cambiar a una aplicación diferente con angular2?

Question

Estoy construyendo una aplicación con una interfaz de usuario compleja. Tan complejo, de hecho, que no creo que pueda usar iónico para simplemente crear una versión amigable para dispositivos móviles de la misma aplicación. Las consultas de medios, por ejemplo, pueden alterar mi CSS, pero necesitaré una estructura completamente nueva y, por lo tanto, una nueva aplicación.

Idealmente, me gustaría tener una aplicación Angular2 estándar para aplicaciones de escritorio y Ionic para dispositivos móviles. Preferiría tenerlos en la misma carpeta de proyecto para poder compartir algún código entre ellos. Ni siquiera estoy seguro de si esto es posible.

¿Hay alguna forma en que pueda detectar si el dispositivo es móvil y presentar una raíz de aplicación / aplicación diferente?

Answer 1

Es posible que desee probar el DynamicComponentLoader. Descargo de responsabilidad, no he usado esto desde Angular2 Alpha. Sin embargo, mi enfoque fue detectar la resolución de la pantalla y cargar dinámicamente un componente en la plantilla principal. Para dispositivos pequeños, cargué un diseño de pestaña y para una cuadrícula sensible más grande. Puede buscar algo como ng2-responsive para una detección más robusta de resoluciones y tipos de dispositivos.

En Angular2 Alpha (el ejemplo lo lamentamos)

Ejemplo de Plunker

modelo:

<div>
<div #location></div>
</div>

método componente:

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

}

Servicio de resolución: (Se recomienda algo como ng2-responsive en lugar de mi servicio de prueba)

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