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