У меня есть следующий шаблон для AppComponent:

<div>
    <div>
        <router-outlet name="menu"></router-outlet>
    </div>
    <div>
        <router-outlet name="main"></router-outlet>
    </div>
</div>

Я хочу использовать этот шаблон в двух случаях:

  • когда я перехожу к /page1, я хочу, чтобы розетка menu содержала Menu1Component и выход main содержала Main1Component
  • когда я перехожу к /page2, я хочу, чтобы розетка menu содержала Menu2Component и выход main содержала Main2Component

Я не понимаю, как работают детские и именные магазины. Какими должны быть мои маршруты при импорте модулей?

Я использую Angular 5.

4
clemtoy 16 Фев 2018 в 20:00

1 ответ

Лучший ответ

Общий подход к этому состоит в том, чтобы сопоставить шаблон на желаемом маршруте и дать ему пустые дочерние маршруты для каждой розетки.

Форматирование (скобки, фигурные скобки и отступы) немного сложно прочитать с первого взгляда, поэтому я выделю здесь каждый маршрут и немного объясню ...

Допустим, вы находитесь в /page1:

const pageOneRoutes = {
   path: 'page1',
};

У этого пути есть два дочерних маршрута (каждая розетка получает свой дочерний маршрут). Оба этих дочерних пути являются «пустыми», потому что вы хотите, чтобы ваш дочерний путь сам по себе соответствовал page1:

const pageOneRoutes = {
   path: 'page1',
   children: [
     { path: '', outlet: 'menu', component: Menu1Component },
     { path: '', outlet: 'main', component: Main1Component }
   ]
};

Затем вы просто повторяете этот процесс для /page2 и других компонентов, которые хотите загрузить.

const pageTwoRoutes = {
   path: 'page2',
   children: [
     { path: '', outlet: 'menu', component: Menu2Component },
     { path: '', outlet: 'main', component: Main2Component }
   ]
};

Для получения дополнительной информации ознакомьтесь с этой частью руководства по маршрутизации Angular, в которой используется этот подход для сопоставления шаблонов в дочерних маршрутах: https://angular.io/guide/router#child-route-configuration.


Все это может выглядеть примерно так:

const ROUTES: Routes = [
 {
   outlet: 'primary',
   path: '',
   children: [
     {
       path: 'page1',
       children: [
         { 
           path: '',
           outlet: 'menu',
           component: Menu1Component
         },
         {
           path: '',
           outlet: 'main',
           component: Main1Component
         }
      },
      {
        path: 'page2',
        children: [
          { 
           path: '',
           outlet: 'menu',
           component: Menu2Component
          },
          {
           path: '',
           outlet: 'main',
           component: Main2Component
          }
        ]
      }
     ]
   ]
 } 
]
7
vince 16 Фев 2018 в 20:27