带有 Bootstrap 动态标签导航的 Angular 应用

Question

我正在尝试使用 Angular 和 Bootstrap 创建一个 SPA。 我有一个带链接的菜单。 当用户单击链接时，新的 Bootstrap 动态选项卡将打开，其内容为 . 现在，我想在选项卡内添加一些导航。 例如：

我有一个销售注册组件。 在它里面，我有四个指向其他组件的链接。 我想在相同的引导程序选项卡的内容中打开链接位置（例如 routerLink='path_to_component'）。

任何解决方案如何实现它？

Answer 1

我认为您想为此使用多个路由器插座。

您需要将一个命名的路由器插座添加到您的销售注册组件中，例如：

<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>