Question

**基本路径是-**

http://localhost:2000/matchcenter/cricket

当我单击以单击<菜单>我的路线变为

来加载另一个页面时

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

我收到错误消息

错误错误：未捕获（承诺）：错误：无法匹配任何路由。 URL段：“ matchcenter / cricket / football”错误：无法匹配任何路线。网址段：“ matchcenter /板球/足球”

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

路径需要以正斜杠（ / ）开头

尝试将路径配置更改为此：

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

Answer 2

创建类似的内容：

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

首先，请确保您的路线从/开始

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

您还可以使用角度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 4

您在HTML中的routerLink="{{item.path}}"应该是routerLink="['/matchcenter/{{item.path}}']"。前面的/使它从基本路由中移出。

如何在Angular中替换路由路径

4 个答案: