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>

带有Bootstrap动态选项卡导航的Angular应用

1 个答案: