具有动态加载组件的Angular2应用程序的设计决策

具有动态加载组件的Angular2应用程序的设计决策,angular,angular2-template,Angular,Angular2 Template,“我的应用”由一个起始页组成,其中用户根据给定用户先前保存的首选项从列表中选择项目,然后更新视图并显示所选功能/页面 这些页面具有不同的配置,因为它们包含不同的子组件 当表达新的需求时,我可以为任何给定的配置(子组件的组合)创建一个新组件,并使列表项指向该组件,但这种方法可能需要大量的手动工作。在我看来,最好的方法是列表项模型(来自backend.service并基于用户偏好)为其子组件保留一个内部数组,该数组的ID应在选择列表中的项时加载 所有教程和指南仅显示如何加载预定义类型的组件和预定义数

“我的应用”由一个起始页组成,其中用户根据给定用户先前保存的首选项从列表中选择项目,然后更新视图并显示所选功能/页面

这些页面具有不同的配置,因为它们包含不同的子组件

当表达新的需求时,我可以为任何给定的配置(子组件的组合)创建一个新组件,并使列表项指向该组件,但这种方法可能需要大量的手动工作。在我看来,最好的方法是列表项模型(来自backend.service并基于用户偏好)为其子组件保留一个内部数组,该数组的ID应在选择列表中的项时加载


所有教程和指南仅显示如何加载预定义类型的组件和预定义数量的组件,但如果有时需要加载3个组件,有时需要加载6个组件,以及不同类型的组件,并且在模板中的顺序不同,该怎么办?我如何动态更改main.component.html(它保存动态创建的子组件集)以加载正确的模板,您是否同意这是解决此问题的好方法?

我碰巧在一个我们有相同需求的项目上工作

我们最终要做的是,我们创建了一个组件,我们称之为
块提供程序
。它将负责动态加载组件,通过使用维护所有组件列表(使用它们的标识符和类)的服务,该列表将必须手动维护,但工作量不大

这将有助于我们以任意顺序和任意位置渲染组件。因为
块提供程序
有一个
id
作为
@Input
我们给它一个组件选择器,它将从上面讨论的服务中获取组件。一旦完成,它将为其分配
@输入
,并最终通过
ng模板
ViewChild
呈现组件

这是一个简单的部分,详细解释了它

当该结构就绪时,您可以使用用户首选项,结合
块提供程序,从后端循环数据


TLDR

我碰巧在一个我们有同样需求的项目上工作

我们最终要做的是,我们创建了一个组件,我们称之为
块提供程序
。它将负责动态加载组件,通过使用维护所有组件列表(使用它们的标识符和类)的服务,该列表将必须手动维护,但工作量不大

这将有助于我们以任意顺序和任意位置渲染组件。因为
块提供程序
有一个
id
作为
@Input
我们给它一个组件选择器,它将从上面讨论的服务中获取组件。一旦完成,它将为其分配
@输入
,并最终通过
ng模板
ViewChild
呈现组件

这是一个简单的部分,详细解释了它

当该结构就绪时,您可以使用用户首选项,结合
块提供程序,从后端循环数据


TLDR

阅读,谢谢!我明天会看一看,看看我是否理解正确。在阅读你的解决方案时,我意识到我的解决方案没有必要,在这个时候,你的解决方案会很好,在我看来是一个很好的解决方案。它将生成更多需要处理的设置和更多的包装器代码,以启动并运行我的应用程序,而不会让应用程序真正从中获益。我将在以后的某个时候,当应用程序准备就绪时,再回来讨论这个问题!谢谢我明天会看一看,看看我是否理解正确。在阅读你的解决方案时,我意识到我的解决方案没有必要,在这个时候,你的解决方案会很好,在我看来是一个很好的解决方案。它将生成更多需要处理的设置和更多的包装器代码,以启动并运行我的应用程序,而不会让应用程序真正从中获益。我将在以后的某个时候,当应用程序准备就绪时,再回来讨论这个问题!