4

我正在使用两个库编写一个角度应用程序：ngx-bootstrap 和 ng-apexcharts。ApexCharts 提供了一个名为 angular 的组件，<apx-chart>它接受一个名为tooltiptype的输入ApexTooltip。html 看起来像这样：

  <apx-chart 
    [series]="[{data: timelineData}]"
    [chart]="timeline.chart"
      [fill]="timeline.fill"
      [legend]="timeline.legend"
      [plotOptions]="timeline.plotOptions"
      [xaxis]="timeline.xaxis"
      [colors]="timeline.colors"
      [title] = "timeline.title"
      [tooltip]="timeline.tooltip"
      [yaxis] = "timeline.yaxis"
   ></apx-chart>

这是角顶点图表文档的链接：https ://apexcharts.com/docs/angular-charts/

ngx-bootstrap 提供了一个名为的模块TooltipModule，当导入到应用程序模块中时，它允许您tooltip在任何元素上放置一个属性，并且当用户将鼠标悬停在该元素上时，它将创建一个工具提示。看起来是这样的：

  <button type="button" class="btn btn-default btn-secondary mb-2"
      tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.
      placement="top">
    Tooltip on top
  </button>

这是 ngx-bootstrap 工具提示文档的链接：https ://valor-software.com/ngx-bootstrap/#/tooltip

我正在尝试将这两个库一起使用，但是当我将工具提示模块添加到应用程序模块导入时，我得到一个编译错误。

@NgModule({
  imports: [
    BrowserModule,
    TooltipModule.forRoot(),
    ...
  ]
...

Error: src/app/activity-report/details/details.component.html:52:8 - error TS2322: Type 'ApexTooltip' is not assignable to type 'string | TemplateRef<unknown>'.
  Type 'ApexTooltip' is not assignable to type 'string'.

52       [tooltip]="timeline.tooltip"
          ~~~~~~~

问题在于，看起来 ngx-bootstrap 正在尝试验证 apx-chart 组件的输入，就好像[tooltip]它是绑定属性而不是 ApexChart 组件输入一样。我从来没有遇到过这种类型的名称冲突，老实说，我很难想出描述它的词，所以如果你有任何建议，即使是关于词汇或知道谷歌的正确词，我真的很感谢你的帮助.

4

0 回答 0