Javascript 完全不同于手机

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

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

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

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

---

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

如果使用

*ngIf

或类似工具，那么如果表达式为false而

[hidden]=“…”

导致渲染HTML，则不会渲染任何内容

无论如何，将逻辑转移到服务是一个好的实践

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

---

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

我已经在服务中提供了所有逻辑，但实际的等轴测投影除外，列表和构建所需的对象不需要它。谢谢