Question

我使用ng-bootstrap替代angular2中的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

这是一个工作的plunker： NgbModule tabs example

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

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

如何为ngb-bootstrap选项卡提供html选项卡标题

1 个答案: