Angular 命名路由器插座无法按预期工作答案

【问题标题】：Angular named router outlet doesn't work as expectedAngular 命名路由器插座无法按预期工作
【发布时间】：2021-03-04 09:41:05
【问题描述】：

我有一个 Angular 项目，具有以下路由结构，从应用根目录开始：

  // app-routing.module.ts
  const routes: Routes = [
    {
      path: 'admin',
      loadChildren: () => import('./features/admin/admin.module').then((m) => m.AdminModule)
    },
  ];
  // Import and export...

  // admin-rounting.module.ts
  const routes: Routes = [
    {
      path: 'admin',
      component: ShellComponent,
      children: [
        {
          path: 'editor',
          loadChildren: () => import('./editor/editor.module').then((m) => m.EditorModule),
        },
      ],
    },
  ];
  // Import and export...

  // editor-routing.module.ts
  const routes: Routes = [
    {
      path: '',
      component: EditorComponent,
    },
    {
      path: 'view-profile',
      component: ViewProfileComponent,
      outlet: 'profile',
    },
    {
      path: 'edit-profile',
      component: EditProfileComponent,
      outlet: 'profile',
    },
  ];
  // Import and export...

它位于AppComponent 中的根出口，然后ShellComponent 包含另一个路由器出口，该出口作为内容传递给SidebarComponent，在mat-sidenav-content 中显示它，如下所示：

    // app.component.html
    <router-outlet><router-outlet>

    // shell.component.html
    <sidebar>
        <router-outlet outlet></router-outlet>
    </sidebar>

    // sidebar.component.html
    <mat-sidenav-content>
        <div class="content">
            <ng-content select="[outlet]"></ng-content>
        </div>
    </mat-sidenav-content>

所以当我导航到/admin/editor 时，一切都按预期工作：我可以看到ShellComponent 和EditorComponent 显示在正确的位置。问题从EditorComponent 内部开始。这个组件包含一个<profile></profile>，我想使用名为profile 的插座显示<view-profile></view-profile> 或<edit-profile></edit-profile> 组件（正如您在EditorRoutingModule 配置中看到的那样。这里的代码：

   // editor.component.html
   <profile></profile>

   // profile.component.html
   <router-outlet name="profile"></router-outlet>

   // profile.component.ts
   ngOnInit(): void {
      this.router.navigate([{ outlets: { profile: ['view-profile'] } }], { relativeTo: this.route });
   }

ProfileComponent 加载，但我没有看到 <view-profile></view-profile> 的预期。检查 HTML，我可以看到我期望的配置文件出口。

有什么建议吗？

【问题讨论】：

标签： angular angular2-routing router-outlet ng-component-outlet

【解决方案1】：

必须像这样将路径属性留空..

{ path: '', component: ViewProfileComponent, outlet: 'view-profile', pathMatch: 'full' }

【讨论】：

【解决方案2】：

我让它工作了，但我不知道它是否应该是这样，或者它是否是一种解决方法。无论如何，我给EditorRoutingModule 的根添加了一个path，并将命名的路由添加为它的子路由，如下所示：

  const routes: Routes = [
    {
      path: 'outlets',
      component: EditorComponent,
      children: [
        { path: 'view-profile', component: ViewProfileComponent, outlet: 'profile' },
        { path: 'edit-profile', component: EditProfileComponent, outlet: 'profile' },
      ],
    },
    { path: '', redirectTo: 'outlets', pathMatch: 'full' },
  ];

我不完全喜欢它，因为我的路线看起来像/admin/editor/outlets/(profile:edit-profile)，如果路线中没有/outlets/ 部分，是否可以达到相同的结果？

【讨论】：