Angular JavaScript 在子组件中不起作用

Question

我在主页组件中有一个左侧导航，导航下拉菜单在其中一个路由模块（ admin-routing.module.ts ）中不起作用。 导航在app-routing.module.ts "path:'home'" 中工作 两个路由模块中的组件文件相同

我是 Angular 新手，我正在使用 Angular 14v

我有一个带有“home”的组件名称

我用了两个路由

1. 应用程序路由.module.ts
2. 管理员路由.module.ts

这进入app-routing.module.ts

const routes: Routes =
  [
    { path: 'login', component: LoginComponent },
    { path: 'forgot-password', component: ForgotPasswordComponent },
    { path: 'not-found', component: NotFoundComponent },
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    {
      path: 'admin',
      loadChildren: () =>
        import('./modules/admin/admin.module').then((m) => m.AdminModule)
    },
    {path:'home', component:HomeComponent},
    { path: '**', component: NotFoundComponent },
    
  ];

这进入admin-routing.module.ts

const routes: Routes = [

  {
    path: '',
    component: HomeComponent,
    children:
      [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent }
      ]
  }
];

我还在angular.json中添加了脚本文件路径

导航下拉菜单和工具在admin-routing.module.ts的“主路径”中不起作用

我在我的服务器中托管了这些文件

工作导航链接是http://angular.byteinnovations.in/home

此导航不起作用http://angular.byteinnovations.in/admin/home

Answer 1

正如我在您的路由中看到的

const routes: Routes = [

  {
    path: '',
    component:HomeComponent,
    children:
      [
        { path: '', redirectTo: 'home', pathMatch: 'full' },
        { path: 'home', component: HomeComponent }
      ]
  }
];

您正在使用 HomeComponent 两次，您可以在adminRouting 模块上检查并以这种方式进行操作吗

const routes: Routes = [
       
           
                { path: '', redirectTo: 'home', pathMatch: 'full' },
                { path: 'home', component: HomeComponent }
            
          
]