时间戳

首页 > 解决方案 > 如何为相同的 url Angular 6 显示不同的视图（对于渐进式 Web 应用程序）

angular - 如何为相同的 url Angular 6 显示不同的视图（对于渐进式 Web 应用程序）

问题描述

这是我的 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'。如果这是我可以实现的方式，那么最好的做法是什么？

标签： angulartypescriptuser-agentprogressive-web-appsangular6

解决方案

理想的 PWA 解决方案是让您的页面具有响应性，因此它可以根据屏幕大小显示相关内容。

但是，如果您想根据设备显示全部内容，您唯一能做的就是找到运行时设备类型（屏幕分辨率、操作系统等）并在通用的家庭 Javascript 代码中使用该信息来路由到适当的组件（例如您提到的两个之一）。没有明确的方法可以根据设备类型定义组件。

推荐阅读