Angular 17辅助路线

Question

我正在尝试在 Angular 17 中配置辅助路由，但遇到一些问题很可能是由于独立组件的更改所致。这是我的配置：

export const FEATURE_ROUTES: Routes = [
  {
    path: '',
    component: ContactComponent,
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'contact',
      },
      {
        path: 'education',
        component: EducationComponent,
        // loadComponent: () =>
        //   import('./modules/education/education.component').then(
        //     (c) => c.EducationComponent
        //   ),
        outlet: 'modal',
      },
    ],
  },
];

export const routes: Routes = [{path: 'contact',loadChildren: () =>import('./feature.routes').then((r) => r.FEATURE_ROUTES),},{path: 'skills',outlet: 'modal',loadComponent: () =>import('./modules/skills/skills.component').then((s) => s.SkillsComponent),},];

routes 配置根据新的 Angular 方法导入到 main.ts 中。

//app.component.html

<button (click)="navigateToContact()">Open contact</button>
<router-outlet></router-outlet>
<div class="modal-outlet">
  <router-outlet name="modal"></router-outlet>

导航到联系页面效果很好

  public navigateToContact(): void {
    this.router.navigate(['contact']);
  }

//contact.component.html

<button (click)="loadEducation()">Load educations</button>

<router-outlet></router-outlet>
<router-outlet name="test"></router-outlet>

还有loadEducation方法：

  public loadEducation(): void {
    this.router.navigate([
      '/',
      { outlets: { modal: ['contact', 'education'] } },
    ]);
    // this.router.navigate(['contact/education']);
  }

我想实现的是工作网址：http://localhost:4200/contact(modal:education)。谢谢

我收到以下错误：错误：NG04002：无法匹配任何路由。 URL 段：“联系/教育”

Answer 1

导航到

EducationComponent

辅助路线的方式应该是：

public loadEducation(): void {
  this.router.navigate(['contact', { outlets: { modal: ['education'] } }]);
}

演示@StackBlitz