javascript - Bao một directive Angular 2+ bằng một directive khác

Tôi đang cố gắng giảm sự lộn xộn trong ứng dụng (Angular 7) của mình bằng cách tạo một directive nhận một tập hợp tham số đơn giản hóa (chẳng hạn như ID người dùng) và hiển thị một popover ng-bootstrap.

Tôi muốn chỉ thị này hoạt động tương tự như một popover ng-bootstrap thông thường, ngoại trừ việc nó được tạo bằng chỉ thị tùy chỉnh thay vì vậy. Tôi biết tôi có thể làm điều gì đó tương tự với một thành phần, nhưng tôi đang dự định sử dụng chỉ thị này trên đủ nhiều phần tử khác nhau nên điều đó sẽ không khả thi.

Có thể bao bọc các chỉ thị như thế này trong Angular 2+, và nếu có, cách tốt nhất để thực hiện việc này sẽ là gì?

Tôi đã tạo một StackBlitz với những gì tôi đã tạo cho đến nay ở đây:

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

}

Câu trả lời #1

1) Trước hết, bạn không bao giờ nên làm

this.element.onclick = () => {

Thay vào đó, hãy sử dụng @HostListener. Đây là cách của Angular để lắng nghe các sự kiện trong Angular trên các Directive.

2) Bạn thực sự cần một thành phần ở đây sẽ có một chỉ thị và đầu vào mà bạn cần.

3) Tôi không biết liệu nó có hoạt động hay không nhưng ít nhất bạn có thể thử mở rộng chỉ thị 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);
      }