完全不同的手机视图

Completely different view for mobile

本文关键字：手机视图更新时间：2023-09-26

我有一个SPA，它需要根据客户端设备以两种完全不同的方式显示我的应用程序。

其中一张展示了我的房子的平面图，上面有灯泡图标，可以打开/关闭我的灯（稍后会有更多信息），使用等轴投影在画布上渲染。

另一个（主要用于移动设备）在更简单的列表/汉堡菜单中显示相同的灯泡图标和名称。

我不想将任何一种设备类型限制为我想要的视图，但根据设备/所选视图完全替换组件的最佳方式是什么？

我应该创建两个组件并将共享逻辑转移到服务/类吗？或者我应该隐藏不需要的组件（我不想浪费资源渲染画布或运行渲染它所需的逻辑）

如果使用*ngIf或类似的表达式，则如果表达式为false，则不会呈现任何内容，而[hidden]="..."会导致呈现HTML。

无论如何，将逻辑转移到服务是一种很好的做法。

您还可以根据视图大小加载不同的路由器配置另请参阅New Angular2路由器配置。通过这种方式，可以为不同的视图大小加载完全不同的构件。

（在下一个版本中，这似乎会得到改进，例如，仅为组件加载新的子路由，还讨论了提供API以允许添加/删除单个路由）