angular——自定义打电话指令

最近项目中有很多页面都需要添加打电话的功能，本来想写一个公共的服务，但是这样每个页面还是需要去引入这个服务，还能点击才能调用，感觉还是挺麻烦的，所以最后自定义了一个打电话的指令。

1、命令创建一个指令，再添加一个懒加载文件，支持在多个文件重复调用。
（理论上来说在多个页面需要使用的指令，可以直接在app.module.ts中引入，全局使用，但是不知道为什么在我这里，页面总是会不认识我自定义的指令，所以只好在每个使用的页面引入其懒加载文件。）

ionic g directive call-phone
ionic g module call-phone (懒加载文件)

然后就会生成自定义指令啦
文件夹结构：

2、 指令创建完了，就可以开始动手写我们的指令了，我这里的功能需要实现的功能是点击电话号码拨打电话，所以需要对指令所在的DOM元素上的点击事件进行监听，可以通过@HostListener 装饰器实现监听，另外在拨打电话时需要电话号码，所以还要将电话号码传给我们自定义的指令，通过@Input()装饰器可以获取到需要传给我们这个指令的参数值，具体实现看代码：

import {
    Directive, Input, HostListener } from '@angular/core';
import {
    CallNumber } from '@ionic-native/call-number/ngx';

@Directive({
   
  selector: '[appCallPhone]',
})
export class CallPhoneDirective {
   

  constructor(public callNumber: CallNumber) {
    }

  // @Input 的参数中把该选择器phone指定为别名appCallPhone，在指令内部，该属性叫做phone，在指令外部，该指令叫做appCallPhone
  @Input('app