angulaire 2 routage avec une URL spécifique

Question

je travaille actuellement sur une application angulaire qui est ouvert sur une URL particulière:

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

Maintenant, je veux mettre en œuvre le routage angulaire. j'ai donc 2 itinéraires: 1. mainComponent 2.dataComponent

dans mon index.html, ont mis l'comme:

<base href="/"> 

Après avoir configuré l'application pour utiliser le routage, mon application ouvre avec seulement localhost: 3000, et même après en ajoutant le param1, param2 à l'url, il est redirigé vers localhost: 3000

Comment puis-je résoudre ce problème? que les paramètres sont passés uniquement sur l'ouverture du lien et il est dynamique

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

Vous avez besoin pour modifier vos itinéraires comme suit

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

Et meilleure façon de fournir des liens

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

Pour recevoir des paramètres que vous devez faire suivant dans votre constructeur du composant

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