Блог

У меня есть проект 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 содержит другую розетку маршрутизатора, которая передается как содержимое в a SidebarComponent , которое отображает его в a 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> , где я хочу отобразить компонент <view-profile></view-profile> или <edit-profile></edit-profile> , используя названную розетку 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, я вижу выход профиля там, где я его ожидаю.

Есть какие-либо предложения по этому поводу?

Пришлось оставить свойство path пустым, как это..

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

Я заставил это работать, но я не знаю, должно ли это быть так или это обходной путь. В любом случае, я передал a path в корень EditorRoutingModule и добавил именованные маршруты в качестве его дочерних элементов, например:

   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/ части в маршруте?