如何替换 Angular 中的路由路径

Question

** 基本路径是 - **

http://localhost:2000/matchcenter/cricket

当我点击菜单 加载另一个页面 时，我的 路线变为

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

我得到错误

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'matchcenter/cricket/football' Error: Cannot match any routes. URL Segment: 'matchcenter/cricket/football'

html

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


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

            </mat-tab>

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

}

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

你的 html 中的 routerLink="{{item.path}}" 应该是 routerLink="['/matchcenter/{{item.path}}']"。前面的 / 让它从 baseroute 出发。

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>

我认为您错过了路径字符串后面的“/”。

Answer 4

首先要确保您的路线从 /

开始

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

根据我的假设，我猜你想将 route param 传递给你的 matchcenter 路由。其中 cricket football nba 是给予 matchcenter 路由的动态参数。

为此，请对您的路线进行以下更改

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

您可以使用 angular ActivatedRoute 进一步获取 MatchcenterComponent 中传递的参数。

否则，如果您不想要路由参数。您需要在路由模块中定义所有路由。对于当前情况，您可以使用

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

如何替换 Angular 中的路由路径

how to replace routing path in Angular

angular

angular-ui-router

angular5

angular6

angular-routing