Angular 8 + 原子设计
Angular 8 + Atomic Design
我对 angular 中的原子设计有一些疑问。基础是可以理解的，我创建最小的原子组件，然后 link 变成更大的，直到页面。什么时候应该在模板中实现不同分辨率的显示？假设我有一个登录页面或主页，这是一个更好的例子，在移动设备和桌面上看起来完全不同。我创建了一个模板主页并在 CSS 中指定了每个分辨率的显示？模板是否恰到好处？
关于从后端提供数据的第二个问题是这些组件。当我已经有一个模板时，我会在主页和 home.component.ts 中使用它，为文章、个人资料、通知等注入一些服务，然后我通过 @Input () 获取这些数据并将其提供？相反，这将导致这样的数据冗余链（数据必须经过每个组件才能到达底部）。这应该如何工作？题目的思路是什么？
（你应该坚持一个问题，post 2 个主题，这样 Whosebug 就可以很容易地搜索 questions/answers）。
虽然这些都是有趣的问题和重要的设计决策。
解决您的两个问题的最佳做法：
设计响应式页面：使用Angular Flex-layout。它允许您根据视口的大小专门化显示。我从来没有遇到过设计如此不同以至于每个页面都需要特定组件的页面。但在任何情况下，您始终可以使用一些 fxShow / fxHide 组合来满足您的需求，前提是它不会引起性能问题。
根据实际需要在组件之间共享的数据量，可以有几种方案（你有更多的选择，look at the official docs）：
- Light：按照您描述的方式进行。您在组件层次结构中向下共享数据。正如您所暗示的那样，它不能很好地扩展，因为改变链中的某个地方会导致其他地方发生变化。
- 中等：使用服务存储和提供数据 (last part of the previous page)。
- 大：使用ngrx-store。然后，您的应用程序有一个异步存储，它在前面的场景中扮演服务的角色。它标准化了您从任何组件访问此数据的方式，并且是单一事实点。这是最佳实践和习语，带来很多好处。但是学习曲线和初始设置开销并不适合所有项目 and/or 经验水平（你需要特别熟悉 RxJs - 如果你还不确定，请选择服务方式）。
我对 angular 中的原子设计有一些疑问。基础是可以理解的，我创建最小的原子组件，然后 link 变成更大的，直到页面。什么时候应该在模板中实现不同分辨率的显示？假设我有一个登录页面或主页，这是一个更好的例子，在移动设备和桌面上看起来完全不同。我创建了一个模板主页并在 CSS 中指定了每个分辨率的显示？模板是否恰到好处？
关于从后端提供数据的第二个问题是这些组件。当我已经有一个模板时，我会在主页和 home.component.ts 中使用它，为文章、个人资料、通知等注入一些服务，然后我通过 @Input () 获取这些数据并将其提供？相反，这将导致这样的数据冗余链（数据必须经过每个组件才能到达底部）。这应该如何工作？题目的思路是什么？
（你应该坚持一个问题，post 2 个主题，这样 Whosebug 就可以很容易地搜索 questions/answers）。
虽然这些都是有趣的问题和重要的设计决策。
解决您的两个问题的最佳做法：
设计响应式页面：使用Angular Flex-layout。它允许您根据视口的大小专门化显示。我从来没有遇到过设计如此不同以至于每个页面都需要特定组件的页面。但在任何情况下，您始终可以使用一些
fxShow/fxHide组合来满足您的需求，前提是它不会引起性能问题。根据实际需要在组件之间共享的数据量，可以有几种方案（你有更多的选择，look at the official docs）：
- Light：按照您描述的方式进行。您在组件层次结构中向下共享数据。正如您所暗示的那样，它不能很好地扩展，因为改变链中的某个地方会导致其他地方发生变化。
- 中等：使用服务存储和提供数据 (last part of the previous page)。
- 大：使用ngrx-store。然后，您的应用程序有一个异步存储，它在前面的场景中扮演服务的角色。它标准化了您从任何组件访问此数据的方式，并且是单一事实点。这是最佳实践和习语，带来很多好处。但是学习曲线和初始设置开销并不适合所有项目 and/or 经验水平（你需要特别熟悉 RxJs - 如果你还不确定，请选择服务方式）。