Angular 2 Routing with a specific url

Question

i'm currently working on an angular app which is opened on a particular url:

localhost:3000/?param1=abc,def&param2=abcdefghi

Now i want to implement angular routing . So i have 2 routes : 1. mainComponent 2.dataComponent

in my index.html ,have set the as :

<base href="/">

After configuring the app to use routing , my app opens with only localhost:3000 , and even after adding the param1,param2 to the url , it is getting redirected to localhost:3000

How can i solve this ? as the parameters are passed only on opening the link and it is dynamic

app.module.ts:

const appRoutes: Routes = [
  { path: 'mainComponent', component: MainComponent },
  { path: 'dataComponent',      component: DataComponent },
  {path : '' , component:MainComponent}
];

app.component.html:

<nav>
    <a routerLink="/mainComponent" routerLinkActive="active">Main</a>
    <a routerLink="/dataComponent" routerLinkActive="active">Data</a>
</nav>
<router-outlet></router-outlet>

umar · Accepted Answer · 2017-07-13 11:23:56Z

2

You need to change your routes as following

const appRoutes: Routes = [
 {path : '' ,redirectTo: 'mainComponent', pathMatch: 'full'},
 { path: 'mainComponent', component: MainComponent },
 { path: 'dataComponent',      component: DataComponent },
];

And better way to provide links

<nav>
    <a [routerLink]="['/mainComponent']" routerLinkActive="active">Main</a>
    <a [routerLink]="['/dataComponent']" [queryParams]="{ param: "paramValue" } routerLinkActive="active">Data</a>
</nav>

To receive parameters you need to do following in your component constructor

constructor(private activatedRoute: ActivatedRoute){
    this.type = activatedRoute.snapshot.params['type'];
}

edited Jul 13, 2017 at 11:23

answered Jul 13, 2017 at 10:36

umar

91010 silver badges24 bronze badges

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

3 Comments

CruelEngine Over a year ago

Thank you for the reply . i made the changes you mentioned , but after clicking on the Data , the url which had the parameters also vanished . is there any way the parameters are not removed on changing the route ?

Steve Land Over a year ago

Not by default - you will need to write a method to handle that using the router.navigate() method and attaching your current parameters. See this tutorial: angular.io/tutorial/toh-pt5

umar Over a year ago

@CruelEngine to pass query parameters you need to do this <a [routerLink]="['/dataComponent']" [queryParams]="{ param: "paramValue" } routerLinkActive="active">Data</a> see my updated code

Collectives™ on Stack Overflow

Angular 2 Routing with a specific url

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related