Javascript 包装一个有角度的2+；指令与另一个指令

我试图通过创建一个指令来减少我（Angular 7）应用程序中的混乱，该指令采用一组简化的参数（如用户ID），并显示一个

ng引导

popover

我希望该指令的工作方式尽可能类似于正常的ng引导popover，只是它是使用自定义指令创建的。我知道我可以对一个组件做一些类似的事情，但我计划在足够多的不同元素上使用这个指令，这是不可行的

有可能在Angular 2+中封装这样的指令吗？如果有，最好的方法是什么

1） 首先，你不应该做这些事

this.element.onclick = () => {

改用@HostListener。这是一种听指令上有角度的事件的方式

2） 这里确实需要一个组件，它将有一个指令和所需的输入

3） 我不知道它是否有效，但您至少可以尝试扩展

NgbPopover

指令：

  export class CustomDirective extends NgbPopover {
      // private element: HTMLInputElement;

      constructor(
        private _elementRef: ElementRef<HTMLElement>,
        private _renderer: Renderer2,
        injector: Injector,
        componentFactoryResolver: ComponentFactoryResolver,
        viewContainerRef: ViewContainerRef,
        config: NgbPopoverConfig,
        private _ngZone: NgZone,
        @Inject(DOCUMENT) private _document: any
      ) {
        super(_elementRef, _renderer, injector, componentFactoryResolver, viewContainerRef, config, _ngZone, _document);
      }

export-class-CustomDirective扩展了NgbPopover{
//私有元素：HTMLInputElement；
建造师(
私人_elementRef:elementRef，
私有渲染器：渲染器2，
喷油器：喷油器，
componentFactoryResolver:componentFactoryResolver，
viewContainerRef:viewContainerRef，
配置：NgbPopoverConfig，
私人(ngZone):ngZone,，
@注入（文档）私有文档：任意
) {
super（_elementRef、_渲染器、注入器、componentFactoryResolver、viewContainerRef、配置、_ngZone、_文档）；
}

这是一个很好的答案。我刚刚发现我可以使用属性组件而不是元素组件，所以我可以做的基本上是

，然后使用

将该div的内容投影到组件中。多亏了你，我走对了方向！

  export class CustomDirective extends NgbPopover {
      // private element: HTMLInputElement;

      constructor(
        private _elementRef: ElementRef<HTMLElement>,
        private _renderer: Renderer2,
        injector: Injector,
        componentFactoryResolver: ComponentFactoryResolver,
        viewContainerRef: ViewContainerRef,
        config: NgbPopoverConfig,
        private _ngZone: NgZone,
        @Inject(DOCUMENT) private _document: any
      ) {
        super(_elementRef, _renderer, injector, componentFactoryResolver, viewContainerRef, config, _ngZone, _document);
      }