Как показать разные представления для одного и того же URL Angular 6 (для Progressive Web Apps) - PullRequest
Новая
       23

Как показать разные представления для одного и того же URL Angular 6 (для Progressive Web Apps)

0 голосов
/ 22 мая 2018

Вот код моего app-router.module.ts 

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DheaderComponent } from './dheader/dheader.component';
import { DdashboardComponent } from './ddashboard/ddashboard.component';
import { MdashboardComponent } from './mdashboard/mdashboard.component';

const routes: Routes = [
    { path:'', component:DheaderComponent},
    { path:'dashboard', if(1){component: DdashboardComponent } else { component :MdashboardComponent} },
    { path:'mdashboard',component:MdashboardComponent},
]
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]

})

export class AppRoutingModule { }

Можно ли показать DdashboardComponent для Рабочий стол и MdashboardComponent для Мобильных пользователей для того же пути, что и path: 'dashboard' .Если это то, как я могу достичь и каковы лучшие практики для этого?

1 Ответ

0 голосов
/ 22 мая 2018

Идеальным решением PWA было бы сделать вашу страницу отзывчивой, чтобы она могла показывать релевантный контент в зависимости от размера экрана.

Но если вы хотите показать полностью содержимое в зависимости от устройства, единственное, что вы можете сделать, это найти тип устройства во время выполнения (разрешение экрана, ОС и т. Д.) И использовать эту информацию в общем домашнем коде Javascript длямаршрут к соответствующему компоненту (как один из двух вы упомянули).Не существует явного способа определения компонента на основе типа устройства.

...