当两个角度库的属性名称冲突时，该怎么办

Question

我正在使用两个库编写一个有角度的应用程序：ngx-bootstrap和ng-apexcharts。ApexCharts提供了一个称为<apx-chart>的角度分量，该分量接受类型为ApexTooltip的名为tooltip的输入。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引导工具提示文档的链接：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引导程序正在尝试验证apx图表组件的输入，就好像[tooltip]是绑定属性而不是ApexChart组件输入一样。我从来没有遇到过这种类型的名字冲突，老实说，我很难想出描述它的词，所以如果你有任何建议，即使是在词汇或知道谷歌上合适的词方面，我也会非常感谢你的帮助。

Answer 1

我在apexcharts和ngx bootstrap方面遇到了与您完全相同的问题。在尝试创建自定义工具提示时，[工具提示]总是引用ngx。为了解决此问题，您应将图表模块与其他应用程序模块隔离。在配置图表的组件文件夹中(让我们将其命名为条形图(，创建一个名为的新文件

bar-chart.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BarChartComponent } from './bar-chart.component';
import { NgApexchartsModule } from 'ng-apexcharts';
@NgModule({
declarations: [
BarChartComponent
],
imports: [
BrowserModule,
NgApexchartsModule
],
exports:[
BarChartComponent
]
})
export class BarChartModule { }

然后，在app.module.ts中，将BarChartModule添加到导入中。这应该可以解决引用问题。