Дополнительная розетка маршрутизатора внутри основной розетки маршрутизатора

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

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'

angular angular-routing angular-auxiliary-routes
person Fabrizio De Bortoli    schedule 06.10.2016    source источник

Ответы (2)


arrow_upward
15
arrow_downward

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

  1. вспомогательные маршруты должны быть дочерними по отношению к родительскому маршруту с путем не ''. Они не будут работать как дочерние элементы маршрута пустого пути. Возможно, это скоро будет исправлено.
  2. вспомогательные маршруты изолированы внутри родительского маршрута. Их правило сопоставления полностью отличается от стандартного правила маршрутизации Angular.
  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-адресу, который загружает именованный маршрут по умолчанию. Или вы можете сделать это в родительском компоненте.

Особая благодарность Брэндону

person Rex    schedule 02.12.2016
comment
Возможно, скоро это будет исправлено ™ :( - person DarkNeuron; 13.11.2017
comment
Спасибо! Первый ответ, который я нашел здесь, помог мне решить мою проблему. - person user3588429; 02.08.2018

arrow_upward
6
arrow_downward

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

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

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

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

/page/wrap/(auxoutlet:auxpath)
person Fabrizio De Bortoli    schedule 07.10.2016