错误：无法匹配任何路由 URL 段：'admin/projects/projectssCategory/list'

问题描述

对于一个模块和另一个模块，我反复收到此错误。

ListProjectCategoryRoutingModule 

看起来像：

import { NgModule } from '@angular/core';
import { AuthGuard } from '../../../../../helpers/auth.gaurd';
import { Role } from '../../../../../data/schema/role';
import { Routes,RouterModule } from '@angular/router';

import { ListProjectCategoryComponent } from './list-project-category.component';

const routes: Routes = [{ path: 'admin/projects/projectCategory/list',component: ListProjectCategoryComponent 
//canActivate: [AuthGuard],//data: { roles: [Role.Admin]}
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class ListProjectCategoryRoutingModule { }


ListProjectCategoryComponent 

看起来像：

import { DetailsProjectCategoryComponent } from '../details-project-category/details-project-category.component';
import { Observable } from "rxjs";
import { ProjectsCategoryService } from "../../../../../data/service/projectsCategory.service";
import { ProjectsCategory } from "../../../../../data/schema/projects";
import { Component,OnInit } from "@angular/core";
import { Router } from '@angular/router';

@Component({
  selector: "app-list-project-category",templateUrl: "./list-project-category.component.html",styleUrls: ["./list-project-category.component.css"]
})
export class ListProjectCategoryComponent implements OnInit {
  projectsCategory: Observable<ProjectsCategory[]>;

  constructor(private projectsCategoryService: ProjectsCategoryService,private router: Router) {}

  ngOnInit() {
    this.reloadData();
  }

  reloadData() {
    this.projectsCategory = this.projectsCategoryService.getProjectsCategorysList();
  }

  deleteProjectsCategory(id: number) {
    this.projectsCategoryService.deleteProjectsCategory(id)
      .subscribe(
        data => {
          console.log(data);
          this.reloadData();
        },error => console.log(error));
  }

  // employeeDetails(id: number){
  //   this.router.navigate(['details',id]);
  //}
}

我从 html 文件中调用它，Home、Admin、Projects 页面导航正常，但在 ProjectCategory 页面中出现错误

<div *ngIf="isAdmin">
<nav class="navbar navbar-expand navbar-dark bg-dark" *ngIf="user">
    <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="/admin/home">Home</a>
        <a class="nav-item nav-link" routerLink="/admin" *ngIf="isAdmin">Admin</a>
        <a class="nav-item nav-link" routerLink="/admin/projects">Projects</a>
        <a class="nav-item nav-link" routerLink="/admin/projects/projectssCategory/list">List Project Category</a>
        <a class="nav-item nav-link" (click)="logout()">logout</a>
    </div>
</nav>
</div>

我必须添加更多类似于 ListProjectCategory

的模块

已在 app.routing.ts 中添加了他们的路由，并且对其他模块工作正常

{ path: '',loadChildren: () => import('./modules/admin/project-folder/projectCategory/list-project-category/list-project-category.module').then(m => m.ListProjectCategoryModule) },

解决方法

你有路径

routerLink="/admin/projects/projectssCategory/list"

但是路由期望

admin/projects/projectCategory/list

只需合并预期和实际结果

我认为双 s 的项目类别有问题

,

在应用路由中。在模块架构中作为路由，您应该提供基本路径，例如 admin。如果您有第二个模块，那么您可能会遇到空基本路线的问题。

{ path: 'admin',loadChildren: () => import('./modules/admin/project-folder/projectCategory/list-project-category/list-project-category.module').then(m => m.ListProjectCategoryModule) }

模块内路由

const routes: Routes = [{ path: 'projects/projectCategory/list',component: ListProjectCategoryComponent 
//canActivate: [AuthGuard],//data: { roles: [Role.Admin]}
}];

并确保您提供的链接正确

在 /admin/projects/projectCategory/list 中的 html 调用 routerLink