我有一个带有routerLink指令的按钮,用于延迟加载的模块。但是链接不起作用。当它被加载到浏览器地址栏中时(单击按钮时)组件永远不会被加载,而在控制台中我得到404错误。我究竟做错了什么。
我想要实现的功能是:当我转到/ events / 5获取填充表单(来自id = 5的事件进行编辑/更新),而当我转到/ events / new以获取空表单时插入新事件。
我认为问题可能出在IncidentsRoutingModule中,但我无法开展工作。
我的主app-routing-module如下:
const appRoutes: Routes = [
{ path: '', redirectTo:'home', pathMatch:'full'},
{ path: 'home', component: HomeComponent },
{ path: 'incidents', loadChildren : 'app/incidents/incidents.module#IncidentsModule' },
{ path: 'patients', loadChildren: 'app/patients/patients.module#PatientsModule' },
{ path: 'doctors', loadChildren: 'app/doctors/doctors.module#DoctorsModule' },
{ path: 'clinics', loadChildren: 'app/clinics/clinics.module#ClinicsModule' },
{ path: 'search', component: SearchComponent },
{ path: '**', component: PageNotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { preloadingStrategy: PreloadAllModules } )
],
exports: [RouterModule]
})
export class AppRoutingModule {}
IncidentsModule是:
@NgModule({
imports: [
CommonModule,
FormsModule,
IncidentsRoutingModule
],
declarations: [
IncidentsComponent,
IncidentDetailsComponent,
IncidentsListComponent
],
providers:[IncidentsService]
})
export class IncidentsModule { }
IncidentsRoutingModule是:
const incidentsModuleRoutes: Routes = [
{
path: '',
component: IncidentsComponent,
children: [
{
path: '', component: IncidentsListComponent,
children: [
{
path:':id', component: IncidentDetailsComponent
},
{
path: 'new', component: IncidentDetailsComponent
}
]
}
]
}
];
@NgModule({
imports: [
CommonModule,
RouterModule.forChild(incidentsModuleRoutes)
],
exports: [RouterModule]
})
export class IncidentsRoutingModule { }
My IncidentsComponent有一个带有routerLink指令的按钮,该按钮无效。贝娄是我的事件成员:
@Component({
// selector: 'app-incidents',
template: `
<div class="container-fluid">
<h3 style="margin:20px 20px 0px 20px;">Περιστατικά</h3>
<button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="/incidents/new">
<i class="fa fa-plus-circle" style="margin-right: 10px"></i>
Νέο Περιστατικό
</button>
<router-outlet></router-outlet>
</div>
`,
styleUrls: ['./incidents.component.css']
})
export class IncidentsComponent {
constructor() {
}
}
答案 0 :(得分:0)
将其更改为
<button type="button" class="btn btn-outline-primary" style="margin: 20px" routerLink="new">
<i class="fa fa-plus-circle" style="margin-right: 10px"></i>
Νέο Περιστατικό
</button>
您可以尝试在主路由模块的forRoot方法中添加useHash: true
答案 1 :(得分:0)
问题是我在IncidentsRoutingModule怀疑的。我将其更改为以下内容并按预期工作。
const incidentsModuleRoutes: Routes = [
{
path: '',
component: IncidentsComponent,
children: [
{
path: '', component: IncidentsListComponent,
},
{
path:':id', component: IncidentDetailsComponent
},
{
path: 'new', component: IncidentDetailsComponent
}
]
}
];
显然我所理解的(不知道这是否正确,没有找到它或在某处读取它)是延迟加载模块中的子节点引用<router-outlet></router-outlet>
声明。
在我的情况下,我只有一个
IncidentsComponent中的<router-outlet>
。因此,所有路径必须位于IncidentsComponent下的子对象中。在其他子组件下添加子对象我认为只有当这些组件也有<router-outlet>
声明时才有效?我是对的????