子路由未路由到 angular 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: [
  ]
})

在我的主要组件中，我有许多水平导航栏选项卡，即 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>

java.routing.ts

const JavaRoutes: Routes = [
  {path:'JAVACourse' , component: JavaComponentComponent ,
 children: [
   { path:  'Introduction',component:IntroductionComponent},
   { path: 'Syntax', component: SyntaxComponent }
  ]}

];

@NgModule({ 进口：[ RouterModule.forChild(Java路线) ], 出口：[ 路由器模块 ] })

4.Java.module.ts

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

So this my folder structure

Answer 1

在你的 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 2

您还可以使用 loadChildren 加载惰性模块，例如。

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

我在 stackblitz 上创建了一个演示。我希望这会 help/guide 到 you/others。

Answer 3

您还可以使用 loadChildren 加载惰性模块，例如。

我在 stackblitz 上创建了一个演示。我希望这会 help/guide 到 you/others。

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
            }
        ]
    }
];

子路由未路由到 angular 5 中的内容页面

child routes not routing to content page in angular 5

single-page-application

angular-routing

angular