Директива, которая вызывает метод обслуживания

Question

Я создал Модальную Службу в Angular 7, которая используется следующим образом Пример Stackblitz :

<button (click)="openModal()">Open Modal</button>

Затем я определил метод openModal в коде компонента:

export class AppComponent  {

  constructor(private modalService: ModalService) { }

  openModal() {
    this.modalService.open({
      component: HelloComponent
    });
  }

}

Можно ли создать директиву для открытия модального окна и использовать ее так:

<button open-modal="HelloComponent">Open Modal</button>

Не уверен насчет синтаксиса, который я публикую ...

Answer 1

Вы можете напрямую вызывать метод вместо использования директивы.Вы можете держать вещи простыми.Директивы - это общий макет, используемый в нескольких компонентах.

Answer 2

Вы можете добиться желаемого поведения, создав пользовательскую директиву:

открытый modal.directive.ts

@Directive({
  selector: '[openModal]'
})
export class OpenModalDirective {
  @Input() modalIdentifier: string;

  constructor(private modalService: ModalService) { }

  @HostListener('click', ['$event'])
  clickEvent(event) {
    event.preventDefault();
    event.stopPropagation();
    this.modalService.openModal(this.modalIdentifier);
  }
}

пустышка open-modal.service.ts

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  constructor() {}

  openModal(modalIdentifier: string) {
    console.log(modalIdentifier)
  }
}

Директива может использоваться следующим образом:

<button openModal [modalIdentifier]="'helloComponent'">Open Modal</button>

Этот пример основан на статье Кори Райлана , а доступен на StackBlitz .