angular - Angular 7 - 更改路由内单个组件的基本 URL

Question

我所有的路线都转到复数版本builder-jobs/，但我想知道我是否可以改变一个去，builder-job/:id但其余的保留为builder-jobs

这是我当前的模块文件 - builder-jobs.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';
import { BuilderJobModule } from '@/modules/builder-jobs/builder-job.module';
import {
    QualityInspectionAddComponent,
    QualityInspectionViewComponent,
    SafetyInspectionAddComponent,
    SafetyInspectionViewComponent,
} from '@/modules/jobs/job.module';

import { AuthGuard } from '@/guards/auth/auth.guard';
import { Role } from '@/models/role';

import { BuilderJobsCalendarComponent } from './builder-jobs-calendar/builder-jobs-calendar.component';
import { BuilderJobsViewComponent } from './builder-jobs-view/builder-jobs-view.component';
import { BuilderJobsAddComponent } from './builder-jobs-add/builder-jobs-add.component';
import { BuilderJobComponent } from './builder-job/builder-job.component';

export const routes: Routes = [
    {
        path: 'view',
        component: BuilderJobsViewComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'add',
        component: BuilderJobsAddComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin] }
    },
    {
        path: 'calendar',
        component: BuilderJobsCalendarComponent,
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin, Role.Supervisor] }
    },
    {
        path: ':id',
        canActivate: [AuthGuard],
        component: BuilderJobComponent,
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: ':id/safety-inspection/:checklist_id',
        canActivate: [AuthGuard],
        component: SafetyInspectionViewComponent
    },
    {
        path: ':id/safety-inspection-add',
        canActivate: [AuthGuard],
        component: SafetyInspectionAddComponent
    },
    {
        path: ':id/quality-inspection/:checklist_id',
        canActivate: [AuthGuard],
        component: QualityInspectionViewComponent
    },
    {
        path: ':id/quality-inspection-add',
        canActivate: [AuthGuard],
        component: QualityInspectionAddComponent
    },
    {
        path: '',
        redirectTo: '/builder-jobs/view',
        pathMatch: 'full'
    },
    {
        path: '**',
        redirectTo: '/builder-jobs/view',
        pathMatch: 'full'
    }
];

@NgModule({
    declarations: [
        BuilderJobsCalendarComponent,
        BuilderJobsViewComponent,
        BuilderJobsAddComponent,
        BuilderJobComponent,
    ],
    imports: [
        CommonModule,
        BuilderJobModule,
        RouterModule.forChild(routes),
    ],
})
export class BuilderJobsModule { }

我想更改以下具体路线：

{
    path: ':id',
    canActivate: [AuthGuard],
    component: BuilderJobComponent,
    data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
},

我试过path: 'builder-job/:id'了，但这似乎不起作用 - 转到 404

这是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules} from '@angular/router';
import { AuthGuard } from '@/guards/auth/auth.guard';

import { DashboardComponent } from '@/views/dashboard/dashboard.component';
import { PageNotFoundComponent } from '@/views/page-not-found/page-not-found.component';
import { LoginComponent } from '@/views/login/login.component';
import { PasswordResetComponent } from '@/views/password-reset/password-reset.component';
import { NewPasswordComponent } from '@/views/new-password/new-password.component';

import { Role } from '@/models/role';

const routes: Routes = [
    {
        path: 'incidents',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/incidents/incidents.module').then(mod => mod.IncidentsModule)
    },
    {
        path: 'dashboard',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/dashboard/dashboard.module').then(mod => mod.DashboardModule)
    },
    {
        path: 'builders',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/builders/builders.module').then(mod => mod.BuildersModule),
    },
    {
        path: 'communities',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/communities/communities.module').then(mod => mod.CommunitiesModule),
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'reroof-jobs',
        loadChildren: () => import('@/views/reroof-jobs/reroof-jobs.module').then(mod => mod.ReroofJobsModule),
        canActivate: [AuthGuard],
        data: { roles: [Role.Admin] }
    },
    {
        path: 'builder-jobs',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/builder-jobs/builder-jobs.module').then(mod => mod.BuilderJobsModule),
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'repair-jobs',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/repair-jobs/repair-jobs.module').then(mod => mod.RepairJobsModule),
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'warranty-jobs',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/warranty-jobs/warranty-jobs.module').then(mod => mod.WarrantyJobsModule),
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'employees',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/employees/employees.module').then(mod => mod.EmployeesModule),
        data: { roles: [Role.Admin, Role.Supervisor] }
    },
    {
        path: 'contacts',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/contacts/contacts.module').then(mod => mod.ContactsModule),
        data: { roles: [Role.Admin, Role.Supervisor] }
    },
    {
        path: 'users',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/users/users.module').then(mod => mod.UsersModule),
        data: { roles: [Role.Admin, Role.Supervisor] }
    },
    {
        path: 'time-entries',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/time/time.module').then(mod => mod.TimeModule),
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'alerts',
        canActivate: [AuthGuard],
        loadChildren: () => import('@/views/alerts/alerts.module').then(mod => mod.AlertsModule),
        data: { roles: [Role.Admin, Role.Supervisor, Role.CrewLeader] }
    },
    {
        path: 'login',
        component: LoginComponent
    },
    {
        path: 'password-reset',
        component: PasswordResetComponent
    },
    {
        path: 'new-password',
        component: NewPasswordComponent
        },
    {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full'
    },
    {
        path: '',
        component: DashboardComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: '',
                canActivateChild: [AuthGuard],
                children: []
            }
        ]
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

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