Angular 4 子路由不工作

Question

大家。我正在使用 angular，但我在路由方面遇到了一些问题。我遵循了一些教程，但路由不起作用。有人可以检查我的代码并告诉我哪里做得更糟吗？

这是我的主要路由器模块：

import { NgModule }      from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './login/login.component';
import { ListadoSolicitudComponent } from './solicitudes/listado_solicitud.component';

const routes: Routes = [
 { path: 'solicitud', loadChildren: './solicitudes/solicitudes.module#SolicitudesModule' },
 { path: 'admin', loadChildren: './administracion/administracion.module#AdministracionModule' },
 { path: 'login', component: LoginComponent },
 { path: 'solicitudes', component: ListadoSolicitudComponent },
 { path: '', redirectTo: '/solicitudes', pathMatch: 'full' }
];
@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule{ }

我的主要模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes} from '@angular/router';

import { Contenedor } from './contenedor.component';
import { SolicitudesModule } from './solicitudes/solicitudes.module';
import { AdministracionModule } from './administracion/administracion.module';
import { AppRoutingModule }  from './app-routing.module';
import { LoginComponent } from './login/login.component';
import { ListadoSolicitudComponent } from './solicitudes/listado_solicitud.component';

@NgModule({
    declarations: [Contenedor, LoginComponent, ListadoSolicitudComponent],
    imports: [BrowserModule, AppRoutingModule/*, SolicitudesModule, AdministracionModule*/],
    providers: [],
    bootstrap: [Contenedor]
})
export class ContenedorModule { }

并且，这是两个路由器子模块 (SolicitudesRutaModule) 之一：

import { NgModule } from '@angular/core';
import { RouterModule, Routes} from '@angular/router';

//Importo los componentes
import { ListadoSolicitudComponent } from './listado_solicitud.component';

import { registrosolicitud } from './registro_solicitud.component';
import { RegistroParticipantes } from './registro_participantes.component';
import { Proyeccion } from './proyeccion_gastos.component';
import { DatoSolicitud } from './datos_solicitud.component';
import { ordencompra } from './orden_compra_solicitud.component';
import { Bitacora } from './bitacora.component';
import { AprobarSolicitud } from './aprobar.component';
import { editarsolicitud } from './editar_solicitud.component';

const Route: Routes = [
  { path: '', component: ListadoSolicitudComponent,
  children: [
    { path: 'registro', component: registrosolicitud },
    { path: 'gasto', component: Proyeccion },
    { path: 'participantes', component: RegistroParticipantes },
    { path: 'compra', component: ordencompra },
    { path: 'bitacora', component: Bitacora },
    { path: 'aprobar', component: AprobarSolicitud },
    { path: 'edit', component: editarsolicitud }
  ]}
];
// Metadatos del módulo
@NgModule({
    imports: [ RouterModule.forChild(Route) ],
    exports: [ RouterModule ]
})
export class SolicitudesRutaModule { }

Answer 1

您没有导入 SolicitudesRutaModule。

在你的 AppRoutingModule 中，你应该这样做：

{ path: 'solicitudes', loadChildren: 'path/to/module#SolicitudesRutaModule' },

请注意，如果 registro 是您 SolicitudesRutaModule 中默认路由 '' 的子路由，则 ListadoSolicitudComponent 的模板中应该有一个 <router-outlet></router-outlet> . 如果不是这种情况，请将 registro 等其他路由与默认路由 ''.

放在同一数组中

Angular 4 子路由不工作

Angular 4 Child Routing is not working

javascript

typescript

angular

angular-router