0

I'm trying to learn Angular and in doing so I have created a small file explorer like application. It has two components layed out like this:

------------------------------------
-                     -            -
-   [DirectoryList]   -  [Details] -
-                     -            -
-                     -            -
------------------------------------
  • The DirectoryList component displays a list of files and folders within the currently selected directory. Clicking a file selects it and shows details in the Details component (shared service). Doubleclicking a folder opens it and updates DirectoryList to display its content instead.
  • The Details component displays information about the currently selected file.

What I'd like to do is have the DirectoryList component change its currently open folder and selected item based on the path or query-string of the url, but I can't figure out how to do this. I basically just want the DirectoryList component to react whenever the path changes and update its view accordingly like so:

url: http://myapp/root/sub1/sub2 <- Opens the folder sub2 in DirectoryList
url: http://myapp/root/sub1/sub2/file.txt <- Opens the folder sub2 and the details for file.txt

I've read up on the routing mechanism in Angular, but I can't find a way to do this (which in my mind should be simple). Every configuration seem to indicate that I HAVE TO combine a route with a component and have that component displayed in a <routing-link> container. However all my routes use the exact same components so there is no need for such a container. The only thing I want is for DirectoryList to get notified whenever the path changes and update itself and the Details component (shared service) accordingly.

Am I misunderstanding something fundamental here? Can this be achieved in a simple way?

Thomas
  • 1,512
  • 3
  • 12
  • 37
  • I think you are looking for this https://github.com/vsavkin/router_mailapp – Robin Dijkhof May 31 '17 at 10:28
  • @RobinDijkhof Thanks for the tip. I'll check it out. – Thomas May 31 '17 at 10:46
  • You can use named router outlet. Take a look at [this one](http://onehungrymind.com/named-router-outlets-in-angular-2/) – ulubeyn May 31 '17 at 12:15
  • @ulubeyn I guess, but I was hoping I didn't have to use any routing outlets at all. The reason is that there is never a need to change out my components at all. All I basically want is to update the existing components based on the path and query string. – Thomas May 31 '17 at 13:13

1 Answers1

1

I am giving this answer based on your comment. If you would like to detect changes on query parameters, you should subscribe to ActivatedRoute's queryParams:

activatedRoute.queryParams.subscribe(params => {
     //let id = params["id"]
});

If you want to detect changes on router, you should subscribe to Router's events:

router.events.filter(i => i instanceof NavigationStart).subscribe(event => {
     //
});

Also,

I hope it helps!

ulubeyn
  • 2,761
  • 1
  • 18
  • 29
  • Thanks! I saw this in the documentation as well. The problem is that this forces me to set op the RouterModule and supply at least one path with an attached component as well as the routing-outlet tag which I was trying to avoid. I did "solve" it by having an additional component wrapping my entire app and routing ** to it. Guess there is no other way. – Thomas May 31 '17 at 16:30