Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Manually changing the route parameters leads to inconsistent user interface

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

    1. Load the plunkr and activate window mode
    2. In window mode copy/paste the url into a new tab
    3. When that is the pasted url: https://run.plnkr.co/LhwcQjzWHsRUda8H/projects/1/schoolclasses
    4. Make it that url: https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/1/schoolclasses
    5. and change param: https://run.plnkr.co/LhwcQjzWHsRUda8H/#/projects/2/schoolclasses
    6. If you dont add the hash then you get a not found 404.
like image 696
Pascal Avatar asked Jan 04 '17 22:01

Pascal


People also ask

What is parameter routing?

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.

Is it possible to implement parameter in routing?

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.

What is Route parameters in angular?

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.

What does the ActivatedRoute interface allow you to access?

ActivatedRoutelink. Provides access to information about a route associated with a component that is loaded in an outlet.


1 Answers

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);
like image 174
Ibrahim El_Khatib Avatar answered Oct 13 '22 02:10

Ibrahim El_Khatib