Angular 12 - 延迟加载路径模块不起作用



我有一个作业模块,它包含我的应用程序的各个组件。我想对所述模块进行延迟加载,然而,当我尝试通过完整路径访问时,它不起作用,也就是说,如果我通过路径http://localhost:4200/job/artist访问,它不工作,但如果我通过http://localhost:4200/#/artist访问,它工作。知道为什么会发生这种事吗?

惰性加载模块的路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Artist } from './components/artist/artist.component';
const routes: Routes = [{
path: 'job',
loadChildren: () => import('../jobs/jobs.module').then(m => m.JobsModule)
}];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
useHash: true,
}),
BrowserModule],
exports: [RouterModule]
})
export class LazyRoutingModule { }

jobs-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { Artist } from './components/artist/artist.component';
const routes: Routes = [{
path: 'artist',component: ArtistComponent,  
}];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class JobsRoutingModule { }

而不是这个:

const routes: Routes = [{
path: 'artist',component: ArtistComponent,  
}];

试试这个:

const routes: Routes = [
{
path: '', component: ArtistComponent,
children: [
{ path: 'artist', component: ArtistComponent, },         
]
}

EDIT@fralejanro改进了我的回答,并说我们必须放"job"而不仅仅是",这样就不会总是重定向到艺术家,只需要用"\job\artist":

const routes: Routes = [
{
path: 'job', component: ArtistComponent,
children: [
{ path: 'artist', component: ArtistComponent, },         
]
}

最新更新