Angular 2加载未知组件

时间:2016-07-06 10:03:56

标签: typescript angular components

我对Angular 2很新,我想知道如何才能更好地解决我的问题。不幸的是,我无法找到解决问题的好方法。

要求

我有一个有很多节点的树。每个节点都可以提供自己的UI(模板+数据)。加载树时,我不知道节点UI。我必须在运行时询问每个节点。然后,节点将决定将提供哪些UI及其提供的数据。

旧方式

如果没有Angular 2,当用户点击某个节点时,我会要求网络服务器向我发送该节点的html。 然后,网络服务器会要求节点提供一些html。该节点可能会加载一个模板,将其数据放入其中并将其发送回浏览器 - 完成。

我尝试使用Angular 2

目前,我有一些组件(使用typescript创建),每个节点都可以决定它将显示哪个组件。当用户使用ComponentResolver单击节点时,我正在加载节点组件。我问网络服务器和网络服务器正在询问节点。目前,节点只知道哪个“已编译的组件js文件”必须从硬盘读取以将其发送回浏览器。现在每个节点都可以提供自己的组件。

现在我正在努力解决一些问题:

  • 我不希望我的节点必须修改已转换的js。像这样,节点很容易提供其数据。节点可以在组件模板中写入其数据。但当然,我不喜欢这个想法。我怎样才能将节点数据放入组件中?

  • 组件应通过服务加载其数据(对吗?)。但是组件/服务如何知道应该向哪个节点请求数据?由于任何节点都可以使用任何组件,因此组件不能具有提供数据的静态URL。至少应将节点ID或路径添加到URL,以便Web服务器知道要求数据的节点。再次通过简单地替换一些字符串将节点url写入到转换的js中会很容易。但同样,我认为这不是很好。

  • 另一件非常不酷的事情是我需要知道一个组件名称,以便使用ComponentResolver加载它。实际上,我不想知道节点在加载它时或之前提供的任何信息。目前,每个节点都可以在描述树的json中编写其组件名称。因此,当用户点击某个节点时,我知道它的路径和应该加载的组件名称。

  • 到目前为止我提出的唯一解决方案是树可以在刚加载的组件中设置节点id或路径(通过使用ComponentResolver)。因此,所有组件都需要具有相同的“接口”。但是,组件可以向网络服务器询问其数据,网络服务器可以询问节点,节点可以提供带有数据的json。

我想知道,我的解决方案有多糟糕?我认为我不是在考虑Angular 2的方式。在Angular 2中实现这一点的好方法是什么?

1 个答案:

答案 0 :(得分:0)

在过去的几天里,我一直在尝试各种不同的事情,最好的(我使用松散的)我想出的是创建一个名为 IFrameComponentLoader 的角度组件,这只是一个IFrame,然后我将 src 设置为一个网页,其网页只是您要加载的动态组件。您可以通过IFrame属性强制执行任何界面。

我一直在玩UID和参数设置到URL,然后在我的src中将UID作为put参数。我不喜欢这些解决方案,但我无法在我的通用应用程序中加载特定的内容。