0

I am very new with Angular 2 and I am wondering how I could solve my problem more elegant. Unfortunately I could not find a good solution for my problem.

Requirement

I have a tree with many nodes. Each node can provide its own UI (template + data). When loading the tree I don't know the nodes UI. I have to ask every node at runtime. The node will then decide what UI and what data it will provide.

The old way

Without Angular 2, when the user clicks on a node I would ask the webserver to send me the html of that node. The webserver would then ask the node to provide some html. The node would maybe load a template, put its data in it and send it back to the browser - done.

My try with Angular 2

Currently, I have some components (created with typescript) and every node can decide which component it will show. I am loading a nodes component when the user clicks on a node by using the ComponentResolver. I am asking the webserver and the webserver is asking the node. Currently the node just knows which "transpiled components js file" it has to read from the hard disk for sending it back to the browser. Now every node can provide its own component.

Now I am struggling with some problems:

  • I don't want that my node has to modify the transpiled js. Like this it would be easy for the node to provide its data. The node could write its data in the components template. But of course, I don't like that idea. How could I put the nodes data into the component?

  • The component should load its data via a service (right?). But how does the component/service know which node it should ask for the data? Since any node can use any component, the component cannot have a static url that provides the data. At least the nodes ID or path should be added to the url so that the webserver knows which node to ask for the data. Again it would be easy to write the nodes url into the transpiled js by simply replacing some strings. But again, I think that's not very nice.

  • Another thing that is very uncool is that I need to know a components name to load it by using the ComponentResolver. I actually don't want to know anything about the UI that the node provides when or before loading it. Currently each node can write its component name in the json that describes the tree. So when a user clicks on a node, I know its path and the components name that should be loaded.

  • The only solution that I came up with until now is that the tree could set the nodes id or path in the just loaded component (by using the ComponentResolver). So all components need to have the same "interface". But then the component could ask the webserver for its data, the webserver could ask the node and the node could provide a json with the data.

I am wondering, how bad my solution is? I think that I am not thinking in the Angular 2 way. What would be a nice way to realize that in Angular 2?

Michael
  • 408
  • 3
  • 13

1 Answers1

0

I have been trying all sorts of different things for this in the last few days and the best (and I use this loosely) I have come up with is to create an angular component called IFrameComponentLoader, which is just an IFrame, and then I set the src to a URL that has a web page that is just the dynamic component you would like to load. You can enforce any interface through the IFrame attributes.

I have also been playing with posting a UID and parameter set to the URL and then having the UID as a put parameter in my src. I am not enjoying any of these solutions, but I can't load something specific in my generic app.

Sᴀᴍ Onᴇᴌᴀ
  • 8,218
  • 8
  • 36
  • 58
zeedub
  • 51
  • 2