调用服务方法的指令

Question

我在Angular 7中创建了一个模态服务，使用如下Stackblitz Example：

<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

您可以通过创建自定义指令来实现所需的行为：

开放式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>

这个例子是based on an article by Cory Rylan和is available on StackBlitz。

Answer 2

您可以直接调用该方法而不是使用指令。你可以保持简单。指令是在多个组件中使用的通用布局。