2

我对角度的原子设计有一些疑问。基础是可以理解的，我创建最小的原子组件，然后链接到更大的组件，直到页面。什么时候应该在模板中实现不同分辨率的显示？假设我有一个登录页面或主页，这是一个更好的示例，在移动设备和桌面设备上看起来完全不同。我创建了一个模板主页，并在 CSS 中为每个分辨率指定了显示？模板是否适合它？

关于从后端提供数据的第二个问题是这些组件。当我已经有一个模板时，然后我在主页中使用它，并且在 home.component.ts 中为文章、配置文件、通知注入一些服务，然后我通过 @Input() 获取这些数据并放弃它？相反，这将导致这样一个冗余的数据链（数据必须经过每个组件才能到达底部）。这应该如何工作？该主题的方法是什么？

4

1 回答 1

1

（您应该坚持一个问题，并发布 2 个主题，以便 StackOverflow 可以轻松搜索问题/答案）。

这些都是有趣的问题，也是重要的设计决策。

解决两个问题的最佳实践：

  1. 设计响应式页面：使用Angular Flex-layout。它允许您根据视口的大小对显示进行专门化。我从来没有遇到过设计如此不同以至于需要为每个页面设置特定组件的页面。但无论如何，您始终可以使用一些fxShow/fxHide组合来满足您的需求，因为它不会产生性能问题。

  2. 根据您需要在组件之间共享的实际数据量，您可以选择几种解决方案（您有更多选择，请查看官方文档）：

    • 光：走你描述的路。您在组件层次结构中共享数据。正如您所暗示的那样，它不能很好地扩展，因为改变链中的某个地方会导致其他地方发生变化。
    • 中：使用服务来存储和提供数据（上一页的最后一部分）。
    • 大：使用ngrx-store。然后，您的应用程序有一个异步存储，它在前面的场景中扮演服务的角色。它标准化了您从任何组件访问此数据的方式，并且是一个单一的事实。这是最佳实践和成语，带来很多好处。但是学习曲线和初始设置开销并不适合所有项目和/或经验水平（你需要对 RxJs 特别好——如果你还不确定，请使用服务方式）。
于 2020-01-17T09:24:51.463 回答