如何将 html 选项卡标题赋予 ngb-bootstrap 选项卡

Question

我在 angular2 中使用 ng-bootstrap 代替 ui-bootstrap。

我的html如下：

<ngb-tabset class="tabs-bordered">
        <ngb-tab index="0">
          <ngb-tab-heading><i class="bi_doc-briefcase-a"></i> My jobs</ngb-tab-heading>
          <div class="clearfix">
            <ngb-tabset>
              <ngb-tab heading="Recommendations">
.........

我也试过 ngb-tab-title 但它给出如下错误：

main.browser.ts:25Error: Template parse errors:
'ngb-tab-heading' is not a known element:
1. If 'ngb-tab-heading' is an Angular component, then verify that it is part of this module.
2. If 'ngb-tab-heading' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("

............

我已经声明了我的模块和组件如下：

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  imports: [NgbModule],
})

@Component({
  selector: 'myProfile',
  styles: [`
  `],
  template: template
})

Answer 1

这是一个有效的插件： NgbModule tabs example

如果您需要在标题中使用 html 内容，您可以使用：

<template ngbTabTitle><b>Fancy</b> title</template>

如何将 html 选项卡标题赋予 ngb-bootstrap 选项卡

How to give html tab title to ngb-bootstrap tab

twitter-bootstrap

angular-ui-bootstrap

angular