javascript - 用另一个指令包装 Angular 2+ 指令

Question

我试图通过创建一个指令来减少我的(Angular 7)应用程序中的困惑，该指令采用一组简化的参数(例如用户 ID)并显示 ng-bootstrap 弹出窗口。

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

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

I've created a StackBlitz with what I've created so far here:

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。这是以 Angular 方式监听指令中 Angular 事件的方式。

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