对于 Angular2 和 MD，桌面上主细节的最佳实践/仅移动设备上的细节

Question

我发布这个可能是因为我不知道一些不可能那么罕见的东西的正确术语。

只是想了解最佳实践和一些 link 示例。

您有一个主列表 - 响应式网站中的详细信息。在移动视图中，该页面在单独的页面中显示主列表及其相关详细信息。但是在桌面视图中，主组件在左侧，详细信息页面 select 在右侧。因此，您 select 主列表中的示例和详细信息部分反映了 selected 主记录 selected。您还可以使用按钮为 selected 主记录更改 selected 详细信息的显示。

在有人发送详细信息 link 之前一切正常.理想情况下，我们希望在桌面视图中显示主从视图，同时显示 selected 详细视图。避免这种情况的最佳做法是什么？

我们是否根据浏览器的大小重新路由？最佳做法是什么？一个简单的 link 示例，也将不胜感激。

此致

马克

Answer 1

网站倾向于使用 media queries 使其在所有不同的屏幕尺寸上都能响应。

根据应用程序在桌面和移动设备上视图的复杂程度，您可以使用 ng2-responsive 之类的东西，它可以让您使用针对屏幕尺寸 xs / sm / md / lg / xl 的断点来显示不同的组件.

Angular 也有 @angular/flex-layout，目前正在开发中，将使用 media queries 断点。此处演示。

这样，应用程序中的所有页面都将具有相同的 link，因此它们可以在桌面或移动设备上使用。

已更新以下评论 1：

例如所有以 /mobile/ 开头的移动页面 URL

因为浏览器需要加载视图以实际获取屏幕尺寸，例如 ng2-responsive 的工作方式是您添加的

手机简单检测

<template *isMobile (change)="onScreenSizeMobile($event)">

</template>

桌面简单检测

<template *isDesktop (change)="onScreenSizeDesktop($event)">

</template>

移动高级检测

 <template  [responsive]="{
                           orientation:'landscape',
                           device: 'mobile'
                           }"
            (changes)="onScreenSizeMobile($event)">
 </template>

桌面高级检测

 <template  [responsive]="{
                           orientation:'landscape',
                           device: 'desktop'
                           }"
            (changes)="onScreenSizeDesktop($event)">
 </template>

TypeScript

constructor(private _router: Router ) {
  this.router = _router;
}

onScreenSizeMobile(event) {
  let currentRoute = this._router.url;
  if (!currentRoute.includes('mobile')) {
    this._router.navigate(['/mobile'+currentRoute]);
  }
}

onScreenSizeDesktop(event) {
  let currentRoute = this._router.url;
  if (currentRoute.includes('mobile')) {
    this._router.navigate([currentRoute.substring(7)]);
  }
}

如果您确实需要不同的 url 桌面和移动视图，则有更好的选择，您可以在服务器上检测设备是否为移动设备，并且从服务器重定向会简单得多方式。

为什么您不能拥有所有相同的页面，但在该页面中您根据设备加载了不同的组件？

如果移动加载 homeMobileComponent

<app-home-mobile *isMobile>
</app-home-mobile>

如果桌面加载 homeDesktopComponent

<app-home-desktop *isDesktop>
</app-home-desktop>

对于 Angular2 和 MD，桌面上主细节的最佳实践/仅移动设备上的细节

Best practice for Master Detail on Desktop/ Detail only on mobile for Angular2 and MD

mobile

routing

responsive

angular2-mdl

angular