子路由器未接收第二条路径 - 忽略子路径

Question

现在是第 10 个小时，我已经尝试了 20 种不同的网络配置。第一组效果很好。公司旗下的孩子只评价

localhost:4200/Employee-pub/1 -\> localhost:4200/Employee-pub/1

localhost:4200/todo -\> localhost:4200/todo

localhost:4200/company -\> localhost:4200/company

localhost:4200/company/details -\> Cannot match any routes

localhost:4200/company/employees -\> Cannot match any routes

localhost:4200/company/employee/:id -\> Cannot match any routes

如果我将公司详细信息的详细信息更改为“”，那么我的子组件会正确渲染公司详细信息，但它永远不会识别/company/之后的任何内容。

公司主.module.ts

        import { EmployeesComponent } from './components/employees/employees.component';
        import { CompanyComponent } from './components/company/company.component';
        import { EmployeeEditComponent } from './components/employee-edit/employee-edit.component';
        import { Routes, RouterModule } from '@angular/router';
        import { CompanyMainComponent } from './company-main.component';
        import { NgModule } from '@angular/core';
        // navigate to the todos component
        import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
        
        export const routes: Routes = [
          { path: 'company',
          component: CompanyMainComponent ,
          children:[
            {
              path: './employee/:id',
              component: EmployeeEditComponent,
              outlet:'employee-edit'
            },
            {
              path: 'details',
              component: CompanyComponent,
              outlet:'company-details'
            },
            {
              path: './employees',
              component: EmployeesComponent,
              outlet:'employees'
            },
            // {
            //   path: '**',
            //   redirectTo:'details'
            // },
          ]
           }
        
        
        
        ];
        
        
        @NgModule({ 
          declarations: [
            EmployeesComponent,
            CompanyComponent,
            EmployeeEditComponent,
            CompanyMainComponent,
        
          ],
          imports: [
              RouterModule.forChild(routes),
              AmplifyAuthenticatorModule],
          exports: [ RouterModule ]
        })
        
        export class CompanyRoutingModule { }

app.module.ts

        import { Routes, RouterModule , RouterOutlet} from '@angular/router';
        // navigate to the todos component
        import { TodosComponent } from './todos/todos.component';
        import { EmployeePublicComponent } from './employee-public/employee-public.component';

        // import { CompanyComponent } from './company-main/components/company/company.component';
     
        // import { CompanyMainComponent } from './company-main/company-main.component';
        import { CompanyRoutingModule } from './company-main/company-main.routing';
        import { NgModule } from '@angular/core';
        import { AmplifyAuthenticatorModule, AuthenticatorService } from '@aws-amplify/ui-angular';
        import { AppComponent } from './app.component';
        import { BrowserModule } from '@angular/platform-browser';
        
        export const routes: Routes = [
        
             { path: 'employee-pub/:id', component: EmployeePublicComponent },
             // { path: '**',component: TodosComponent },
             { path: 'todo',component:TodosComponent }
          ];
        
          @NgModule({
            imports: [
              RouterModule.forRoot(routes),
              CompanyRoutingModule,
              RouterOutlet,
        BrowserModule,
              AmplifyAuthenticatorModule 
          ],
            declarations: [
              AppComponent,
              TodosComponent
            ],
            bootstrap: [ AppComponent ],
            exports: [ RouterModule ]
        
        })
        export class AppRoutingModule { } 

公司-main.component.ts

         <router-outlet></router-outlet>

app.component.ts

         <router-outlet></router-outlet>

我希望在公司/anything下导航时呈现详细信息、员工、员工/：id屏幕，相反，路由器读取将不匹配嵌套的子项。

Answer 1

首先将公司主路由添加到app模块的路由中。

      export const routes: Routes = [
         { path: 'employee-pub/:id', component: EmployeePublicComponent },
         { path: 'todo', component:TodosComponent },
         {
          path: 'company', 
          loadChildren: () =>
            import('./company-main/company-main.routing').then(
               (mod) => mod.CompanyRoutingModule 
            ),
         },
      ];

然后您可以更改公司路线，从空白路线开始。我们还需要删除子路由中的前缀斜杠。

export const routes: Routes = [
  {
    path: '',
    component: CompanyMainComponent,
    children: [
      {
        path: 'employee/:id',
        component: EmployeeEditComponent,
        outlet: 'employee-edit',
      },
      {
        path: 'details',
        component: CompanyComponent,
        outlet: 'company-details',
      },
      {
        path: 'employees',
        component: EmployeesComponent,
        outlet: 'employees',
      },
      {
        path: '**',
        redirectTo:'details'
      },
    ],
  },
];