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

Question

I'm trying to create a SPA with Angular and Bootstrap. I have a menu with links. When the user clicks the link, the new Bootstrap Dynamic Tab opens and it's content is . Now, i want to add some navigation INSIDE the tab. For example:

I have a Sale-Register Component. Inside it i have four links to other components. I want to open the links location (eg. routerLink='path_to_component') INSIDE the same bootstrap tab's content.

Any solutions how to achieve it?

Answer 1

I think you want to use Multiple Router Outlets for this.

You need add a named router outlet to your Sale-Register Component like:

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

Then you also need to define which component to load in your Routes array like:

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

Finally update the navigation link to use your outlet:

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