将一个 Angular 2+ 指令与另一个指令包装在一起

Question

我正在尝试通过创建一个指令来减少我的（Angular 7）应用程序中的混乱，该指令采用一组简化的参数（例如用户ID）并显示ng-bootstrap弹出框。

我希望该指令的工作方式尽可能类似于普通的 ng-bootstrap 弹出窗口，只是它是使用自定义指令创建的。我知道我可以对组件做类似的事情，但我计划在足够多的不同元素上使用此指令，这是不可行的。

是否可以将这样的指令包装在 Angular 2+ 中，如果是这样，实现这一目标的最佳方法是什么？

我已经用我到目前为止在这里创建的内容创建了一个 StackBlitz：

import { Directive, ElementRef, OnInit, Input } from '@angular/core';
@Directive({
  selector: '[app-custom-directive]'
})
export class CustomDirective implements OnInit {
  private element: HTMLInputElement;

  @Input() parameter: string = 'Parameter';
  constructor(private elRef: ElementRef) {
    this.element = elRef.nativeElement;
  }
  ngOnInit() {
    this.element.onclick = () => {
      alert('This should open a popover containing the directive parameter "' + this.parameter + '". But how?')
    };
  }
}

Answer 1

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);
      }