在角5中没有路由到内容页的子路由

Question

我已经创建了许多有内部组件的模块。

文件夹结构

--app
      --java
        --Introduction
         --Syntax

每个组件都是一个组件，我在所有组件中都添加了路由模块。

现在，如果我将子路由添加到app.routing.ts，那么它就是正确的路由。但是，当我将子路由添加到不同的路由模块时，它不会路由到该组件并给出错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'JAVACourse/Syntax'

以下是我的一些代码：

1.app.routing.ts

我已经评论了儿童路线，因为这是可行的。

 const appRoutes: Routes = [
{path:'Home' , component: HomepageComponent },
{path:'JAVACourse' , component: JavaComponentComponent },
// children: [
//   { path:  'Introduction',component:IntroductionComponent},
//            { path: 'Syntax', component: SyntaxComponent },
//   ]
// }

{path:'HTMLCourse' , component: HtmlcomponentComponent },
{path:'ASP.NET' , component: DotnetcomponentComponent },
// {path: '', redirectTo: '/Home',pathMatch: 'full'},
 //{path: '**',redirectTo: '/Home',pathMatch: 'full'  }

];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes
    )
  ],
  exports: [
    RouterModule
  ],
  providers: [
  ]
})

在我的主要组件中，我有许多水平的navbar选项卡，即Java，它使用子选项卡路由到sidenavbar。

2.javacomponent.html

<ul>
      <a>JAVA Course</a>
      <li routerLinkActive="active"[routerLinkActiveOptions]="{exact: true}"><a routerLink="Introduction">Introduction</a></li>
      <li routerLinkActive="active"><a routerLink="Syntax">Syntax</a></li>


</ul>

1. java.routing.ts const JavaRoutes: Routes =[ { path：'JAVACourse‘，组件: JavaComponentComponent，子组件：{ path：’IntroductionComponent}，{path：‘语法’，组件: SyntaxComponent } ]； @NgModule({ imports: RouterModule.forChild(JavaRoutes)，exports: RouterModule })

4.Java.module.ts

@NgModule({
  imports: [
    JavaRoutingModule
  ],
  declarations: [
    IntroductionComponent,
    SyntaxComponent
  ],
  providers: [ ]
})
export class JavaRoutingModule {}

这是我的文件夹结构

Answer 1

您还可以使用loadChildren来加载类似的延迟模块。

我在stackblitz上创建了一个演示。我希望这将对你/其他人有所帮助/指导。

app.module.ts

const app_routes: Routes = [
    {
        path: '',
        redirectTo: '/java',
        pathMatch: 'full'
    }, {
        path: 'java',
        component:JavaModule
    },{
        path: 'php',
        loadChildren: () => PhpModule
    }
];

java.module.ts

const routes: Routes = [
    {
        path: 'java',
        component: JavaDashboardComponent,
        children: [
            {
                path: '',
                redirectTo: 'introduction',
                pathMatch: 'full'
            },{
                path: 'introduction',
                component: JavaIntroductionComponent
            },{
                path: 'syntax',
                component: JavaSyntaxComponent
            },{
                path: 'java-script',
                component: JavaScriptComponent
            }
        ]
    }
];

Answer 2

在app.routing.ts，中而不是使用

{path:'JAVACourse' , component: JavaComponentComponent },

使用

{ 'path': 'JAVACourse', loadChildren: './java/java.module#JavaModule' },。

也取代

{path:'JAVACourse' , component: JavaComponentComponent ,

使用

{path:'' , component: JavaComponentComponent ,

在java.routing.ts.中假设JavaModule是java文件夹中的模块名。

Answer 3

您还可以使用loadChildren来加载类似的延迟模块。

{path:"lazy", loadChildren: () => CustomersModule}

我在stackblitz上创建了一个演示。我希望这将对你/其他人有所帮助/指导。