Manually changing the route parameters leads to inconsistent user interface

Question

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.

Answer 1

I'm not sure if i correctly understand your question, anyway here is my plunkr.

  this.router.events.subscribe(event => {

        if (event instanceof RoutesRecognized)
        {
          var first=event.state.root.firstChild.firstChild;
          var id = first && event.state.root.firstChild.firstChild.params['id'];
          console.debug('recognized', id);
          this.currentProject = this.projects[+id-1];

          console.log(this.currentProject);
        } 
  });

Just navigate to #/projects/1/tests.

Answer 2

There is no global params change one can subscribe to.

One approach is to locate the route and its params starting from the root router:

console.log('router', this.router.routerState.root.firstChild.firstChild && this.router.routerState.root.firstChild.firstChild.snapshot.params);

This can be done within this.router.events.subscribe((val) => { or within a router guard like canActivate or resolve https://angular.io/docs/ts/latest/guide/router.html#!#guards

Answer 3

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);