Angular项目ngx-bootstrap与ng-apexcharts的tooltip属性冲突如何解决

这个问题属于Angular 属性型指令与组件输入属性命名冲突，也可归类为指令选择器冲突。本质是ngx-bootstrap的TooltipModule导出的Tooltip属性型指令的选择器为[tooltip]，会匹配所有带tooltip属性/属性绑定的DOM元素与组件，优先级高于组件自身的同名输入属性，因此会把<apx-chart>的tooltip输入当成ngx-bootstrap的tooltip属性做类型校验，触发类型不匹配错误。
你可以使用「Angular 指令选择器冲突」、「Angular 第三方库属性重名」作为关键词检索更多相关解决方案。

• 方案1：缩小TooltipModule导入范围（优先推荐）
  不要在根模块全局导入TooltipModule，仅在实际使用ngx-bootstrap tooltip功能的组件所属的特性模块中导入，不导入到包含<apx-chart>组件的模块即可完全规避冲突。
• 方案2：使用ngx-bootstrap的备用属性名
  ngx-bootstrap的Tooltip指令默认支持bsTooltip作为备用绑定名，你可以把项目中所有使用ngx-bootstrap tooltip的代码从tooltip="xxx"/[tooltip]="xxx"统一改为bsTooltip="xxx"/[bsTooltip]="xxx"，即使全局导入TooltipModule也不会再匹配<apx-chart>上的[tooltip]绑定。
• 方案3：代码侧赋值避开模板绑定
  给<apx-chart>添加模板引用变量，在组件生命周期中直接给实例赋值，避免在模板中写[tooltip]绑定：
  模板代码：

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

  组件TS代码：

  import { ViewChild, AfterViewInit } from '@angular/core';
  import { ChartComponent } from 'ng-apexcharts';
  
  export class YourComponent implements AfterViewInit {
    @ViewChild('chartRef') chartRef!: ChartComponent;
    timeline = {
      // 原有配置
      tooltip: { /* your ApexTooltip配置 */ } as ApexTooltip
    }
  
    ngAfterViewInit(): void {
      this.chartRef.tooltip = this.timeline.tooltip;
      this.chartRef.update(); // 可选，触发配置刷新
    }
  }
  

内容的提问来源于stack exchange，提问作者Paul B