Here is a plunker to play with:
https://plnkr.co/edit/qTjftING3Hk2fwN36bQa?p=preview
Everything works well, except when you manually change the id parameter in the url bar, because then the projects dropdown does not show the new projectId as current project. This happens when the user saves an url as favorite link and copy/paste it into the url bar! A common case I would say!
To fix this I can listen to route.params changes in the TestsListComponent
and add a check with a sharedService/EventEmitter
wheter the changed id exists in that dropdown. The bool return value existsProjectId inside the TestsListComponent decides wether I should redirect to the /projects
page because the id did not exist.
But honestly, redirecting from the TestsListComponent
is too late at least from a user experience perspective, because the route projects/:id/tests
is already activated.
How would you fix that misbehavior?
P.S.
Maybe there is kind of a global params change I can listen to and check the path and its id inside the ProjectsListComponent, that would help!
If someone knows how to edit the url bar of the plunkr in window mode to test that inconsistency please let me know how you made that readonly url bar editable... even copying the url into a new tab does not work, as I get a plunkr not found error... => ANSWER
Route parameters are named URL segments that are used to capture the values specified at their position in the URL. The captured values are populated in the req.params object, with the name of the route parameter specified in the path as their respective keys.
In order to pass dynamic values from the URI to the controller you can use parameters. Parameters are defined in the route path using curly braces.
To access the route parameters, we use route.snapshot , which is the ActivatedRouteSnapshot that contains information about the active route at that particular moment in time. The URL that matches the route provides the productId . Angular uses the productId to display the details for each unique product.
ActivatedRoutelink. Provides access to information about a route associated with a component that is loaded in an outlet.
Update your app.routes.ts file like below and use HashLocationStrategy, for reference: HashLocationStrategy
import {Routes, RouterModule} from '@angular/router';
import ProjectListComponent from './projects-list.component';
import TestsListComponent from './tests-list.component';
import OverviewComponent from './overview.component';
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
export const routes: Routes = [
{ path: '', redirectTo: 'projects', pathMatch: 'full' },
{
path: 'projects', component: ProjectListComponent,
children: [
{ path: ':id', redirectTo: ':id', pathMatch: 'full' },
{
path: ':id', component: OverviewComponent,
children: [
{ path: '', redirectTo: 'tests', pathMatch: 'full' },
{ path: 'tests', component: TestsListComponent },
]
]
}
];
export const appRoutingProviders: any[] = [
{
provide: LocationStrategy,
useClass: HashLocationStrategy
}
];
export const routing = RouterModule.forRoot(routes);
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