Angular 8 +原子设计

JuniorWithEverything

我对角度的原子设计有一些疑问。基础是可以理解的,我创建了最小的原子组件,然后链接到较大的原子组件,直至页面。何时应在模板中以不同的分辨率实现显示?假设我有一个登录页面或主页,以获得更好的示例,它将在移动设备和台式机上看起来完全不同。我创建一个模板主页,然后在CSS中为每种分辨率指定显示方式?模板是正确的位置吗?

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

Qortex

(您应该坚持一个问题,并发布2个主题,以便可轻松在StackOverflow中搜索问题/答案)。

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

与两个问题相关的最佳做法:

  1. 要设计自适应页面:使用Angular Flex-layout它允许您根据视口的大小来专门显示。我从未遇到过页面设计会如此不同,以至于每个页面都需要有特定的组件。但无论如何,您都可以始终使用一些fxShow/fxHide组合来满足您的需求,因为它不会引起性能问题。

  2. 根据您需要在组件之间共享的实际数据量,可以使用几种解决方案(您可以选择更多方法,请参阅官方文档):

    • :按照您的描述进行。您可以按组件层次结构共享数据。正如您所暗示的那样,它的扩展性不好,因为链中某处的更改会导致其他地方的更改。
    • :使用服务来存储数据并使数据可用(上一页的最后一部分)。
    • :使用ngrx-store然后,您的应用程序具有一个异步存储,该存储在前面的场景中扮演服务的角色。它标准化了您从任何组件访问此数据的方式,这是一个事实。这是最佳实践和习惯用法,具有很多好处。但是学习曲线和初始设置开销并不适合所有项目和/或经验水平(您需要特别注意RxJ-如果不确定,可以采用Service方式)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章