How to decorate page structure / Routes in Angular 4?

Question

I have a regular angular 4 application and I use Router, ActivatedRoute.params.subscribe, [routerLink] etc. to navigate between pages and interpret URLs.

Now this leads to the fact that I have many "magic strings" flying around, because many different .ts-Files have url fragments. Of course, this works because they match, but it seems to be confused. Here is a random example:

<a [routerLink]="['/foo']">Home</a> <a [routerLink]="['/foo/item', 1]">Item 1</a> <a [routerLink]="['/foo/item', 2]">Item 2</a>

One of my ideas was to create a service that builds URLs for components and, therefore, knows about the structure of the URL. This is just one idea that I had, but I'm not so experienced with angular and maybe the “magic lines” are the way to go for some reason.

Is there a better way to keep the structure of the urls from your components?

Answer 1

That's why I used the dependency of the router on my components and each time I manually direct each of my points. Of course, if the routes change, I will have to change a few lines, but I'm fine.

For this purpose, I also created a navigation component that will show me the routes of my application. I even tried to dynamically build application routes with a lot of metadata and rights management, but in the end I destroyed the possibility of lazy loading, so I would not advise doing this.

, (, ). : https://github.com/akveo/ng2-admin/blob/master/src/app/pages/pages.menu.ts

: https://github.com/akveo/ng2-admin