What is the best practice regarding routerLink and presentational components in Angular?

user_2210870 0
Viewed 933

Like many other people I also like to split my components into container (smart) components and presentational (dumb) components. Of course I also like my application to use the router so that it is easy for the user to navigate the application, bookmark specific pages (or should I say states?) etc.

One feature I would really like the user to have is the ability to open links in new tabs or copy the URL of a link directly. So obviously I use the routerLink directive which is provided by the RouterModule of Angular. But this brings me to a conceptual problem which I'm not sure how to solve.

Let's say I have the following routes and components defined:

'/heroes'  --> HeroesPageComponent (contains a <router-outlet>)
    ''     --> HeroesListPageComponent (contains <heroes-list> component)
    '/:id' --> HeroesDetailPageComponent (contains <hero-detail> component)

The page components are "smart components" which get the needed data from the Router (like the ID) and fetch data which they then simply pass to their children (HeroesListComponent and HeroDetailComponent) which are presentational components.

In my example, the HeroesListComponent should know nothing about the application outside its borders to stay reusable in other contexts (like the the CrisisCenter in the Angular Docs example). But in this case, I would like each hero in the displayed list to have a link to '/heroes/:id' so that the user could open and edit each hero in a separate tab / window. But to build this link using routerLink the component would have to have knowledge about the configured routes and in what context it is used. This would make it rather hard to reuse the component.

Are there any best practices on how to get the best of both worlds? On how to keep presentational components as dumb as possible while allowing them to create actual hrefs to other pages?

I hope my example was clear enough. If not, just let me know :)

Thanks!

angular components routing
1 Answers

One simple solution is to give the dumb child component an additional input property, e.g. @Input() navigateTo: string; . The routerlink directive can be bound to this value.
This way, only the parent element needs knowledge about the configured routes. It passed 2 properties to each of the listed children: display-value and a navigation target.

user_112379940
Related