Menu
I am building a cms where a user can pick what pages to use. So if the user wants a contact page, they select it and fill out some content for it and their site would have a contact route for example. Based on this, is it possible to dynamically add routes in angular based on if a user wants or does not want a particular page?
680
Instead of “href” attribute of anchor tag, we use the “routerLink” attribute of Angular. The routerLink attribute allows us to link to a specific route of the Application.
BaseRouteReuseStrategylink This base route reuse strategy only reuses routes when the matched router configs are identical. This prevents components from being destroyed and recreated when just the fragment or query parameters change (that is, the existing component is reused).
At the basic level, routing allows angular to display different "pages" or components. You probably want to have it, if you want to navigate across pages in your application. It shouldn't hurt anything if you add it, but don't use it.
There is one additional piece of data that Angular requires for dynamic routing. Any Route that is provided dynamically must be defined in your Appplication’s NgModule as a set of ‘entryComponents.’
The Injector is used since you would otherwise get a circular reference by attempting to inject the Router. There is one additional piece of data that Angular requires for dynamic routing. Any Route that is provided dynamically must be defined in your Appplication’s NgModule as a set of ‘entryComponents.’
If you run the application now with the ng serve --open command, you should see the “home works!” label on the main page. That means the default route works as expected, and shows us the auto-generated by Angular CLI content.
By modifying ActivatedRoute.routeConfig directly, it is also possible to dynamically add new routes. This is very handy when you want to add new routes as children of a route existing deeply in route hierachy. And maybe it is the only way when the route is in a lazily loaded module. The bad news is that it lacks validation on newly added routes.
Yes. There are multiple ways to accomplish what you are wanting. You can use router.resetConfig to reset the router's config with a new config:
this.router.resetConfig([ { path: 'somePath', component: SomeComponent}, ... ]); You can also push routes onto the config:
this.router.config.push({ path: 'somePath', component: SomeComponent }); Another way I've done this is I had made a way users could build pages using something like TinyMCE and specify the url path they wanted the page to have. In Angular, I specified a wild-card route in the router with { path: '**', component: ComponentBuilder }, where the ComponentBuilder component would fetch the template from the database that corresponds to the path someone requested and then dynamically generate the component with the template. If a template didn't exist in the database, then a normal Page cannot be found template was rendered.
Both ways work. It comes down to how you want your application to function and how you will build the pages users create.
There is a lot more documentation and examples on how to create dynamic components since the solution I came up with in version 2 rc4. I have not used any of these, but it looks helpful:
NPM package for Dynamic Components
Angular Docs on Dynamic Component Loader
Dynamically Creating Components
Another article on dynamically creating components
170
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
