** le chemin de base est - **
lorsque je clique pour charger une autre page en cliquant pour le menu, mon itinéraire devient
et j'obtiens une erreur
ERREUR Erreur: non intercepté (promis): Erreur: ne peut correspondre à aucune route. Segment d'URL: erreur "matchcenter / cricket / football": ne peut correspondre à aucun itinéraires. Segment d'URL: "matchcenter / cricket / football"
html
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { ErrorComponent } from './error/error.component';
import { MatchcenterComponent } from './matchcenter/matchcenter.component';
import { FleshScreenComponent } from './flesh-screen/flesh-screen.component';
import { CricketComponent } from './cricket/cricket.component'
const routes: Routes = [
{path: '' , component: FleshScreenComponent, pathMatch:'full' },
{ path: 'login' , component:LoginComponent },
{ path: 'register' , component: RegisterComponent },
{ path: 'error' , component: ErrorComponent},
{ path: 'matchcenter' , component: MatchcenterComponent},
{ path: 'matchcenter/cricket' , component: CricketComponent},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
fichier ts
import { Component, OnInit } from '@angular/core';
import { CricketComponent } from '../cricket/cricket.component';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
navLinks:any;
constructor() {
this.navLinks=[
{path:'cricket',label: 'Cricket'},
{path:'football',label: 'Football'},
{path:'nba',label: 'NBA'},
]
}
ngOnInit() {
}
}
4 Réponses :
Votre routerLink = "{{item.path}}" dans votre html doit être routerLink = "['/ matchcenter / {{item.path}}']" . Le / en face le fait partir de la route de base.
en utilisant votre chemin J'obtiens une erreur ERREUR Erreur: Non intercepté (promis): Erreur: ne peut correspondre à aucune route. Segment d'URL: "matchcenter / football" Erreur: ne peut correspondre à aucun itinéraire. Segment d'URL: "matchcenter / football"
Ne mélangez pas les crochets et les doubles crochets, ils font juste la même chose. Donc Angular essaiera de le réanalyser comme s'il s'agissait de javascript
@TestingAnurag C'est parce que vous n'avez pas de parcours pour le football dans votre app-routing.module . Si vous voulez que http: // localhost: 2000 / matchcenter / football fonctionne, vous devez ajouter un itinéraire dans le app-routing.module comme `{path: 'matchcenter / football ', composant: FootballComponent}, `.
Les chemins doivent commencer par une barre oblique (/ )
Essayez de changer la configuration du chemin en suivant:
{
path: '/cricket',
label: 'Cricket'
}, {
path: '/football',
label: 'Football'
}, {
path: '/nba',
label: 'NBA'
},
En utilisant votre chemin, j'obtiens une erreur: ne peut correspondre à aucun itinéraire. Segment d'URL: "football" Erreur: ne peut correspondre à aucun itinéraire. Segment d'URL: "football"
@TestingAnurag, pouvez-vous également ajouter la configuration de routage à votre question?
J'ai ajouté s'il vous plaît voir
créez quelque chose comme ça:
<nav>
<ul>
<li><a href="" [routerLink]="['/datatable']">datatable</a></li>
<li><a href="" [routerLink]="['/customer']">Customer</a></li>
<li><a href="" [routerLink]="['/courses']">Courses</a></li>
<li><a href="" [routerLink]="['/my-table']">MyTable</a></li>
</ul>
</nav>
Je pense que vous manquez la chaîne "/" Behind Your path.
Tout d'abord, assurez-vous que vos itinéraires commencent à partir de /
const routes: Routes = [
{ path: '' , component: FleshScreenComponent, pathMatch:'full' },
{ path: 'login' , component:LoginComponent },
{ path: 'register' , component: RegisterComponent },
{ path: 'error' , component: ErrorComponent},
{ path: 'matchcenter' , component: MatchcenterComponent},
{ path: 'matchcenter/cricket' , component: CricketComponent},
{ path: 'matchcenter/football' , component: FootballComponent},
{ path: 'matchcenter/nba' , component: NbaComponent},
];
D'après mon hypothèse, je suppose que vous voulez passer route param vers votre route matchcenter . Où cricket football nba sont des paramètres dynamiques donnés à l'itinéraire matchcenter .
Pour ce faire effectuez les modifications suivantes dans votre itinéraire
const routes: Routes = [
{ path: '' , component: FleshScreenComponent, pathMatch:'full' },
{ path: 'login' , component:LoginComponent },
{ path: 'register' , component: RegisterComponent },
{ path: 'error' , component: ErrorComponent},
{ path: 'matchcenter/:type' , component: MatchcenterComponent}
];
Vous pouvez obtenir les paramètres passés dans MatchcenterComponent en utilisant ActivatedRoute angulaire.
Ou bien si vous ne voulez pas de paramètres d'itinéraire. Vous devez définir toutes les routes dans le module de routage. Pour le scénario actuel, vous pouvez utiliser
this.navLinks=[
{ path:'/cricket',label: 'Cricket'},
{ path:'/football',label: 'Football'},
{ path:'/nba',label: 'NBA'},
];
Votre chemin de base est - ** ????
angular.io/guide/router#configuration