子路径未以角度5路由到内容页面-Java 学习之路

我创建了许多具有内部组件的模块

文件夹strutcure

--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（{imports：[RouterModule.forChild（JavaRoutes）]，导出：[RouterModule]}）

4.Java.module.ts

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

So this my folder structure

3 回答

您也可以使用loadChildren来加载惰性模块 .

我在stackblitz上创建了一个demo . 我希望这将有助于/指导您/其他人 .

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

回复于 2024-04-26T16:18:46+08:00

0

在你的 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文件夹中的模块名称 .

回复于 2024-04-26T16:18:46+08:00
0
您也可以使用loadChildren来加载惰性模块 .
```
{path:"lazy", loadChildren: () => CustomersModule}
```
我在stackblitz上创建了一个demo . 我希望这将有助于/指导您/其他人 .
回复于 2024-04-26T16:18:46+08:00

子路径未以角度5路由到内容页面

3 回答

相关问题