Menu
I have some nested modules with different url prefixes. Now I want to navigate within one module without specifying the prefix (in my module I do not want to know under which prefix the module is accessible).
These are the routes for my app.module:
const APP_ROUTES: Routes = [
{
path: '',
children: [
{ path: '', component: MainComponent },
{ path: 'nested', loadChildren: 'app/nested/nested.module#NestedModule' }
]
}
];
export const routing = RouterModule.forRoot(APP_ROUTES, { useHash: true });
These are the routes for my nested.module:
const APP_ROUTES: Routes = [
{
path: '',
component: NestedComponent,
children: [
{ path: '', component: NestedSubComponent },
{ path: 'sub', component: NestedSubComponent },
{ path: 'sub/:id', component: NestedSubComponent }
]
}
];
export const routing = RouterModule.forChild(APP_ROUTES);
Now I want for example to navigate from /#/nested/sub to /#/nested/sub/123. How can I achieve this? I do not know how deep I am nested in my submodule (i.e. if my subroute is / or /sub or /sub/:id) and also I do not want to use the nested prefix as I want to have a generic solution which can be used for other submodules, too.
291
Relative Navigation In Angular. In this article, we are going to learn the relative navigation in the Angular application. While building the application with the use of absolute path we pin the same link everywhere we required that path. So when we change the parent route then we have to change the path to the links used outside also.
A route is created using Angular Route interface and array of Route is Routes type. Route has different properties to handle route such as path, component, outlet, children, loadChildren etc. To create child route for a route, we need to use children property. To load child module lazily in application module, we need to use loadChildren property.
Child routes can have their own child routes and so on. A route is created using Angular Route interface and array of Route is Routes type. Route has different properties to handle route such as path, component, outlet, children, loadChildren etc. To create child route for a route, we need to use children property.
If you want to access MaterialModule from a sub-module, you'll have to declare MaterialModule in this sub-module. This'll be pretty lame with all your shared modules ... The basic way to solve this is just to create a SharedModule, import/export everything that you want to use in your whole app.
You can use second parameter of Router.navigate() method to specify relativeTo option, then it will navigate relatively to that route.
constructor(private router: Router,
private activatedRoute: ActivatedRoute) {}
goDeeper() {
this.router.navigate(['next-nested-route'], {relativeTo: this.activatedRoute});
}
goBack() {
this.router.navigate(['../'], {relativeTo: this.activatedRoute});
}
You can also use routerLink directive, which has ActivatedRoute set implicitly, just do not put there the first slash.
<a routerLink="/next">absolute</a>
<a routerLink="next">relative next</a>
<a routerLink="..">relative back</a>
More about this in angular docs: https://angular.io/guide/router#!#relative-navigation
73
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
