Menu
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!
888
What is the difference between [routerLink] and routerLink ? How should you use each one? They're the same directive. You use the first one to pass a dynamic value, and the second one to pass a static path as a string.
The dumb component is a simple component that has only two responsibilities which are to present given data and to notify its parent about any raw user interaction, such as clicking a button. The smart component acts as the parent of the dumb one and it handles all data manipulations.
In Angular, RouterLink is a directive for navigating to a different route declaratively. Router. navigate and Router. navigateByURL are two methods available to the Router class to navigate imperatively in your component classes.
Presentational components are literally the user interface of our Angular application. They serve two purposes: Present application state to the user. Change application state triggered by user interaction.
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.
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
