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。

错误TypeError：无法读取未定义的属性“ subscribe” 在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 [作为handleEvent]（VimeoVideoListComponent.html：24）在handleEvent（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] ，它不会起作用，大声笑

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名称引用冲突

1 个答案: