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

【问题标题】：Ngx-Bootstrap Popover and Ngx-popover name reference conflictNgx-Bootstrap Popover 和 Ngx-popover 名称引用冲突
【发布时间】：2019-10-23 20:49:05
【问题描述】：

我正在一个项目中工作，该项目一直在使用 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。

错误类型错误：无法读取未定义的属性“订阅” 在 Popover.push../node_modules/ngx-popover/Popover.js.Popover.show (Popover.js:114) 在 Popover.push../node_modules/ngx-popover/Popover.js.Popover.toggle (Popover.js:67) 在 Popover.push../node_modules/ngx-popover/Popover.js.Popover.showOrHideOnClick (Popover.js:37) 在 Object.eval [as handleEvent] (VimeoVideoListComponent.html:24) 在句柄事件 (core.js:19628) 在 callWithDebugContext (core.js:20722) 在 Object.debugHandleEvent [作为 handleEvent] (core.js:20425) 在 dispatchEvent (core.js:17077) 在 core.js:17524 在 HTMLButtonElement。 (platform-browser.js:993)

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

通过做一些类似 [PopoverBModule.popover] 它不起作用大声笑

【问题讨论】：

你能用 setTimeou 0 包围popover.onCloseFromOutside.subscribe(function () { return _this.hide(); }); 吗？ setTimeout(() => { popover.onCloseFromOutside.subscribe(function () { return _this.hide(); }) }, 0);它会等待它被添加到HTML中
我想我发现了这个问题，但我正在研究我已经安装了 ngx-bootstrap Pop over 和 ngx-popover 我认为我与这些模块有名称冲突并且指向不同的模块。我会继续到达
是的，我会换个问题
你是对的，你真的需要在你的模块中使用这两个库吗？
我想就像这个答案stackoverflow.com/questions/46213094/… 中所说的那样，您必须创建一个只导入 ngx-bootstrap 的中间模块，扩展指令以提供另一个选择器并导出这个新指令。跨度>

标签： angular ngx-bootstrap ngx-bootstrap-popover

【解决方案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

【讨论】：