как заменить маршрут в Angular

Question

** Базовый путь - **

http://localhost:2000/matchcenter/cricket

когда я нажимаю загрузить другую страницу , щелкнув по меню, мой маршрут становится

http://localhost:2000/matchcenter/cricket/football

и я получаю ошибку

ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «MatchCenter / Cricket / Football» Ошибка: не может найти ни одного маршруты. Сегмент URL: «матчцентр / крикет / футбол»

HTML

  <mat-tab *ngFor="let item of navLinks" >


                <div routerLink="{{item.path}}">{{item.label}}</div>

            </mat-tab>

ts file

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() {
  }

}

приложение-routing.module.ts

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 { }

Answer 1

Прежде всего, убедитесь, что ваши маршруты начинаются с /

this.navLinks=[
    { path:'/cricket',label: 'Cricket'},
    { path:'/football',label: 'Football'},
    { path:'/nba',label: 'NBA'},
];

Исходя из моего предположения, я предполагаю, что вы хотите передать параметр маршрута на ваш matchcenter маршрут. Где cricket football nba - динамические параметры, заданные для matchcenter route.

Для этого внесите следующие изменения в свой маршрут

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

Далее вы можете получить переданные параметры в MatchcenterComponent, используя угловой ActivatedRoute.

Или, если вы не хотите использовать параметры маршрута. Вам необходимо определить все маршруты в модуле маршрутизации. Для текущего сценария вы можете использовать

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

Answer 2

Пути должны начинаться с косой черты (/)

Попробуйте изменить конфиги пути следующим образом:

{
  path: '/cricket',
  label: 'Cricket'
}, {
  path: '/football',
  label: 'Football'
}, {
  path: '/nba',
  label: 'NBA'
},

Answer 3

создайте что-то подобное:

<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>

Я думаю, что вы пропустите строку "/" Behined Your path.

Answer 4

Ваш routerLink="{{item.path}}" в вашем HTML должен быть routerLink="['/matchcenter/{{item.path}}']". / впереди заставляет его идти из baseroute.