Вспомогательный маршрутизатор-розетка внутри основного маршрутизатора-розетки

Question

Я пытаюсь использовать вспомогательный маршрутизатор-выход внутри основного маршрутизатора-розетки.

app.routing

export const appRoutes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'page',
        loadChildren: () => new Promise(function (resolve) {
            (require as any).ensure([], function (require: any) {
                resolve(require('../pages/page.module').default);
            });
        })
    }
];

app.component

@Component({
    template: `<h1>My App!</h1>
        <a [routerLink]="['/page']">Page</a>
        <router-outlet></router-outlet>`
})

page.module

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild([
            {
                path: '',
                component: PageComponent
            },
            {
                path: 'auxpath',
                component: AuxComponent,
                outlet: 'auxoutlet'
            }
        ])
    ],
  declarations: [PageComponent],
  exports: [PageComponent]
})
export default class PageModule {}

page.component

@Component({
    template: `Page <router-outlet name="auxoutlet"></router-outlet>`
})

aux.component

@Component({
    template: `Aux`
})

Ошибка/page/(auxoutlet:auxpath) будет видеть компонент страницы, но с этой ошибкой:

EXCEPTION: Uncaught (in promise): Error: Cannot find the outlet auxoutlet to load 'AuxComponent'

Answer 1

Я решил использовать эту конфигурацию маршрута:

RouterModule.forChild([
  {
    path: 'wrap',
    component: PageComponent,
    children: [
      {
        path: 'auxpath',
        component: AuxComponent,
        outlet: 'auxoutlet'
      }
    ]
  },

  {
    path: '',
    component: PageComponent
  }
])

Этот URL работает:

/page/wrap/(auxoutlet:auxpath) 

Answer 2

Я попытался работать с отложенной загрузкой и назвал router-outlets и обнаружил следующие факты:

1. вспомогательные маршруты должны быть дочерними по отношению к родительскому маршруту с отсутствующим путем '', Они не будут работать как дети пустого пути. Это может быть исправлено в ближайшее время.
2. вспомогательные маршруты изолированы в пределах родительского маршрута. Их правило соответствия полностью отличается от стандартного правила угловой маршрутизации.
3. если мы лениво загружаем модуль с вспомогательными маршрутами, нам нужно перенаправить маршрут по умолчанию с пустым путем к маршруту с непустым путем, в котором есть компонент, содержащий именованные <router-outlet> и его дети будут вспомогательными маршрутами и другими дочерними маршрутами. (Это может быть исправлено в ближайшее время, так же, как в пункте 1.)

4. Вы можете загрузить названную розетку по: url (parentRoute/outletName:['outletPath', param]), или используя директиву Router Link ([routerLink]=['parentRoutes',{outlets: {outletName:['outletPath', param]}}] или программно (this.router.navigate(['parentRoutes',{outlets: {outletName:['outletPath', param]}}])

5. Чтобы удалить именованную розетку, укажите outlets: {outletName: null} в URL, routerLink или коде.

6. Из-за ошибки (перенаправление пустого дочернего пути к именованному маршруту не работает), в настоящее время не существует элегантного способа загрузки именованного маршрута по умолчанию и возможности его последующего удаления указанным выше методом. Это может быть исправлено в ближайшее время. Однако у вас может быть пустой путь с фиктивным компонентом, и в его конструкторе вы перейдете к URL-адресу, который загружает именованный маршрут по умолчанию. Или вы можете сделать это в родительском компоненте.

Особая благодарность Brandon