Что мне делать, когда у двух библиотек angular конфликт имен атрибутов?

#angular #ngx-bootstrap #apexcharts #property-binding #name-conflict

#angular #ngx-bootstrap #apexcharts #привязка свойств #конфликт имен

Вопрос:

Я пишу приложение angular, используя две библиотеки: ngx-bootstrap и ng-apexcharts. ApexCharts предоставляет вызываемый компонент angular <apx-chart> , который принимает входные данные, вызываемые tooltip типом 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>
 

Вот ссылка на документацию angular apex charts: 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. Я никогда не сталкивался с конфликтом имен такого типа, и, честно говоря, мне было трудно подобрать слова для его описания, поэтому, если у вас есть какие-либо советы, даже по словарному запасу или знанию правильных слов в Google, я был бы очень признателен за вашу помощь.

Комментарии:

1. Первое, что приходит на ум, — это пространства имен. Возможно, вы могли бы перенести одну или обе эти библиотеки в отдельные пространства имен?