Ngx-Bootstrap Popover 和 Ngx-popover 名称引用冲突

Question

我在一个使用 ngx-popover 的项目中工作，但它仅限于特定情况。

我想继续使用这两个库，但我遇到了一些冲突，因为实现非常相似。

模块

import { PopoverModule } from "ngx-popover";
import { PopoverModule as PopoverBModule } from "ngx-bootstrap";
    imports: 
    [
       ...,
       PopoverModule,            
       PopoverBModule.forRoot(),          
    ],

HTML ngx-bootstrap:

<ng-template #popTemplate let-message="message">{{ message }}</ng-template>
<button type="button" class="btn btn-primary"
        [popover]="popTemplate" [popoverContext]="context" [outsideClick]="true">
  Open popover with custom context
</button>

HTML ngx-popover:

 <i[popover]="popId"></i>
    <popover-content
       #popId
       placement="above|auto"
       [animation]="true"
       [closeOnClickOutside]="true">
        ....
     </popover-content>

我没有任何编译错误问题是当我尝试执行 ngx-bootstrap popover 它直接指向 ngx-popover。

ERROR TypeError: Cannot read property 'subscribe' of undefined at Popover.push../node_modules/ngx-popover/Popover.js.Popover.show (Popover.js:114) at Popover.push../node_modules/ngx-popover/Popover.js.Popover.toggle (Popover.js:67) at Popover.push../node_modules/ngx-popover/Popover.js.Popover.showOrHideOnClick (Popover.js:37) at Object.eval [as handleEvent] (VimeoVideoListComponent.html:24) at handleEvent (core.js:19628) at callWithDebugContext (core.js:20722) at Object.debugHandleEvent [as handleEvent] (core.js:20425) at dispatchEvent (core.js:17077) at core.js:17524 at HTMLButtonElement. (platform-browser.js:993)

问题是：有一种方法可以强制指令 [popover] 指向 ngx-bootstrap 但只是在这种特殊情况下？

通过做一些类似 [PopoverBModule.popover] 的事情是行不通的 LOL

Answer 1

解决方案是创建一个模块来导入 ngxbootstrap 和我的组件，然后只导入模块而不是在父模块中导入 VimeoVideoListComponent。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PopoverModule } from "ngx-bootstrap";
import { VimeoVideoListComponent } from './vimeo-video-list.component';
@NgModule({
  declarations: [
    VimeoVideoListComponent
  ],
  exports:[VimeoVideoListComponent],  
  imports: [
    CommonModule,
    PopoverModule.forRoot()    
  ]
})
export class VimeoVideoListModule { }

感谢@Gilsdav

Ngx-Bootstrap Popover 和 Ngx-popover 名称引用冲突

Ngx-Bootstrap Popover and Ngx-popover name reference conflict

ngx-bootstrap

angular

ngx-bootstrap-popover