Угловое приложение с Bootstrap Динамическая навигация по вкладкам

Question

Я пытаюсь создать SPA с Angular и Bootstrap.У меня есть меню со ссылками.Когда пользователь щелкает ссылку, открывается новая вкладка Bootstrap Dynamic Tab, и ее содержимое отображается.Теперь я хочу добавить навигацию внутри вкладки.Например:

У меня есть компонент продажа-регистр.Внутри него у меня есть четыре ссылки на другие компоненты.Я хочу открыть расположение ссылок (например, routerLink = 'path_to_component') ВНУТРИ содержимого той же вкладки начальной загрузки.

Какие-нибудь решения, как этого добиться?

Answer 1

Я думаю, что вы хотите использовать Несколько маршрутизаторов для этого.

Вам необходимо добавить именованную розетку маршрутизатора в ваш компонент Sale-Register, например:

<router-outlet name='outletname'></router-outlet>

Затем вам также нужно определить, какой компонент загружать в массив Routes, например:

const routes: Routes = [
  { path: "page", component: PageComponent }, // This is your primary outlet's definition
  {
    path: "tabpage",
    component: TabPageComponent,
    outlet: "outletname" // This is where you define which outlet to use
  }
]

Наконец, обновите навигационную ссылку, чтобы использовать вашу розетку:

<a [routerLink]="[{ outlets: { primary: ['page'], outletname: ['tabpage'] } }]">
  Link to the tab
</a>