Angular 如何为移动版本的组件创建单独的.html和.scss文件？

他是否可以让Angular 7拾取某个模板和样式文件并将其带给用户

有时我需要完全不同的布局表示，而@media并不是那么舒服，特别是当你需要重新构造整个页面时，代码就乱七八糟了

目前，正如我所看到的，只有一种解决方案——隐藏不同设备的ng模板（代码的某些部分）

我在这里读了很多问题，但都是老问题。我希望在这个快速变化的IT世界中，最近可能发生了一些变化，并且有一个好的、优雅的解决方案来处理这些任务

我试图以这种方式解决它-

(b) ? './app.component.html' : './test2.html';

但不幸的是，它不起作用

如果您能给我一些提示，我将不胜感激

---

附言：我真的很喜欢NativeScript最近实现它的结构。拥有同样的能力会很好。

这是一个可以通过延迟加载模块解决的问题的极好例子

在这里可以找到一个很好的布线指南和视频教程：

您的问题本质上是不知道用户在加载时是在桌面上还是在移动设备上，所以您要做的是等待代码做出决定，然后呈现相应的组件

我的解决方案：

1） 创建两个模块，一个用于所有桌面组件，另一个用于所有移动组件

2a）根据上面链接的指南，将这两个模块加载到主AppModule中

或

2b）如果捆绑包大小不是问题，则导入AppModule中的所有组件

3） 创建一个父组件，该组件的唯一任务是确定用户是桌面用户还是移动用户

parent.component.ts

将具有确定用户是移动用户还是桌面用户的逻辑，并且可以通过任意数量的窗口计算或npm包来实现这一点

parent.component.html

将包含两个组件和一个

ngIf

，其中

isMobile

确定要呈现的组件

奖励积分

---

通过为匹配的组件创建一个类并导入不同的模板来隔离逻辑

构建两个不同的组件，然后同时导入这两个组件。然后使用JavaScript确定用户是否在移动设备上。将该布尔值放入父组件的ngIf中，以决定渲染哪个组件。不管怎样，这就是我的解决方案。Angular在创建构建时使用自定义版本的Webpack，因此您可以使用此指南进行延迟加载：作为开发人员坐下来重新思考您的体系结构。基于设备上下文极大地改变其表示的超级组件是一个可维护性问题。用更小的单一用途组件来解决问题。@Bradd非常感谢您！我绞尽脑汁想了几天，什么是实现这一目标的最佳解决方案。但我无法获得如何动态选择所需组件的关键。我通常使用延迟加载来导入单独的模块，即应用程序的一部分。你的意思是我用JavaScript检查设备并重定向到特定的url？@reactular，当然！我试图找到一个解决办法，但我觉得我现在还没有那么熟练。这就是为什么我想问更多的技术人员他们是如何做到这一点的。