Angular - routing rewrite url

Question

I have a problem that seems simple, but I've searched a lot for the solution but couldn't find it, especially since lots of things changed since Angular2.

I have few special pages

/page/1

represents page about water

/page/2

represents page about fire.

Other pages are "normal" like

/contact
/about

...

In RouterModule I have:

RouterModule.forRoot([      
  {
      path: 'page/:id',
      component: PageComponent     
  },
  {
      path: 'contact',
      component: ContactComponent     
  },

So Water and Fire content are generated in PageComponent depending on id 1 or 2, respectively. (I have other dynamic data, not just water and fire)

Now I want when user enters

/water

to see the content of (without changing URL!) to

/page/1

So I have a redirection, in lack of better solution:

{ path: 'water', redirectTo: 'page/1', pathMatch: 'full' },
{ path: 'fire', redirectTo: 'page/2', pathMatch: 'full' } ...

But that results in changing URL. But what I want is when user enters

/water

I want the URL to remain that, not the redirection! (Same goes for /fire and other dynamic content pages.)

Maybe just get rid of the /pages/:id routes, and have { path: 'water', component: PageComponent }? — mbojko
– mbojko, Commented Apr 21, 2019 at 14:58
Oh, you mean, I read the URL ending? I never thought of it, but isn't it "cheating"? Isn't there a more standard, Angular, way? — Dalibor
– Dalibor, Commented Apr 21, 2019 at 15:08
Why would reading route params and altering the view accordingly be "cheating"? ActivatedRoute.params (or paramMap) is there for a reason. — mbojko
– mbojko, Commented Apr 21, 2019 at 15:27
Can you help me out how to read route params? And how to set them in the first place in my example? Please respond in the answer. — Dalibor
– Dalibor, Commented Apr 21, 2019 at 15:31

arieljuod · Accepted Answer · 2019-04-21 15:55:36Z

4

What about this:

RouterModule.forRoot([      
  {
    path: 'page/:id',
    component: PageComponent     
  },
  {
    path: 'contact',
    component: ContactComponent     
  },
  {
    path: 'water',
    component: PageComponent,
    data: {id: 1}
  },
  {
    path: 'fire',
    component: PageComponent,
    data: {id: 2}
  }

https://angular.io/guide/router

You'll have to modify your PageComponent a little to check if there's an id on the data observable or the id comes from the url though.

answered Apr 21, 2019 at 15:55

arieljuod

16k2 gold badges27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dalibor Over a year ago

Thanks, just what I was looking for: data! I tried and googled and all I found was param-something obsolete this and that :)

Dalibor · Accepted Answer · 2019-04-21 17:50:19Z

Partly based on mbojko answer (because checking id on the data observable as arieljuod suggested was too much for me), I made a following solution:

RouterModule.forRoot([      
  {
    path: 'contact',
    component: ContactComponent     
  },
  {
    path: 'water',
    component: PageComponent
  },
  {
    path: 'fire',
    component: PageComponent
  }

and then in the PageComponent:

import { Location } from '@angular/common';

...

constructor(
        private location: Location,

...

private mapPathToId(path: string): number {
    switch (path) {
        case '/water':
            return 1;
        case '/fire':
            return 2;
        ...
    }        
}

ngOnInit(): void {
    const id = this.mapPathToId(this.location.path());
    this.showContent(id);          
}

Collectives™ on Stack Overflow

Angular - routing rewrite url

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related