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 。侦听指令中的事件是一种有角度的方式。

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

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

1 个答案: