Angular 角度设计中的设计模式困境

在我的应用程序的设计模式上，我面临着两难境地

我目前有一个标题组件，它在大于992px和小于992px的分辨率上完全不同。在我的组件中，我有两个不同的标记，我根据使用媒体查询的分辨率显示/隐藏它们。现在的问题是，如果我使用内容投影，我不能在两个标记中同时添加相同的子组件。因此，我必须使用select参数。然而，我必须将每个子组件包含两次，一次用于标题中的每个ng内容

更不用说注入的一些子组件在大于或小于992px的分辨率上也有完全不同的布局

我似乎找不到这种设计的最佳实践

1我应该为手机和桌面制作两个标题组件吗

2我是否应该继续使用单标题组件，而不是内容项目子组件两次？一次用于移动设备，一次用于桌面

透视图的一些代码：

应用程序标题组件模板

正在我的应用程序中使用的应用程序标题：

---

注：请注意，app child在桌面和移动设备上的设计也可能不同。

如果桌面和移动设备的标题在功能上完全不同，我看不出有两个独立组件的问题。最好有两个简单的组件，你的应用程序可以在一个地方做出一个明确的决定，决定哪个组件将显示，而不是有一个复杂的组件，有很多逻辑和许多条件来决定它应该如何显示。维护2个简单清晰的组件比管理1个非常复杂的组件更容易。从两个不同的开始，然后如果你觉得它们在融合或重叠很多，你可以把它们合并成一个

---

TLDR:2个不同的、直截了当的组件比1个过于复杂的组件更容易维护

谢谢@Eeks33-里面的内容如何？大多数情况下，投影的组件也将具有不同的布局。在这种情况下，每个布局可以有两个不同的组件。然而，维护桌面和移动设备之间的某些状态会增加父组件的负担。这样想，您的应用程序是一个由组件组成的树状结构。如果任何一个节点变得太复杂，您需要拆分该节点，然后是的，这两个节点的父节点将承担一点负担。这样做是为了使每个节点的集成点保持简单。如果你发现在你的层次结构的每一个层次上，你都在与移动和桌面的逻辑作斗争和维护，那么你可以继续把了解移动和桌面的负担推到树的更高位置。最终，你将面临移动页面vs桌面页面，以及移动应用vs web应用的概念。之前的评论太长，无法结束——最终，稍微重复一下可能比过于复杂的成本更低。问问你自己你想打哪场仗，什么能更好地满足你的应用程序的需要Hanks@Eeks33-那么我就这样试试

<section class="desktop-header">
    This is my desktop header which is different in design
    <ng-content select="[desktop]"></ng-content>
</section>

<section class="mobile-header">
    This is my mobile header which is different in design
    <ng-content select="[mobile]"></ng-content>
</section>

<app-header>
    <app-child desktop></app-child>
    <app-child mobile></app-child>
</app-header>