Angular 如何在角节点中替换路由路径

**基本路径为-**

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

我得到了一个错误

错误：未捕获承诺：错误：无法匹配任何路由。 URL段：“matchcenter/cricket/football”错误：无法匹配任何 路线。URL段：“比赛中心/板球/足球”

html

app-routing.module.ts

---

html中的routerLink={{item.path}}应该是routerLink=['/matchcenter/{{item.path}}]。前面的/使其从baseroute开始。

路径需要以正斜杠/

尝试将路径配置更改为：

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

---

创建这样的内容：

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

---

我想你错过了你的路线

第一件事首先确保你的路线从/

基于我的假设，我猜你想通过你的比赛中心路线。板球足球nba是比赛中心路线的动态参数

为此，请在路线中进行以下更改

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

---

您的基本路径是-**？使用您的方式，我得到错误：无法匹配任何路由。URL段：“football”错误：无法匹配任何路由。URL段：'football'@TestingAnurag，你能把路由配置也添加到你的问题中吗？我已经添加了请参见使用你的方式我得到错误错误错误：未捕获承诺：错误：无法匹配任何路由。URL段：“matchcenter/football”错误：无法匹配任何路由。URL段：“matchcenter/football”不要混合使用方括号和双花括号，它们只是做同样的事情。所以Angular将尝试重新解析它，就好像它是javascript@TestingAnurag这是因为你的app-routing.module中没有足球路线。如果你愿意http://localhost:2000/matchcenter/football 要工作，您必须在app-routing.module中添加一条路由，如`{path:'matchcenter/football'，component:FootballComponent}，`。

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

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

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

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