具有特定网址的Angular 2路由

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>

Answer 1

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'];
}