使用指令

Question

我已经使用一个自定义的指令来检测点击的元件外侧的角2，但同样是不可能的角度4.

[plunkr]https://plnkr.co/edit/aKcZVQ?p=info

当尝试检测点击角4的外部元件使用angular-4中的相同代码我会得到以下错误：

1. '{template：string;指令：typeof ClickOutside []; }'不能分配给'Component'类型的参数。 ==>

   @Component（{ templateUrl： “”， 指令：[ClickOutside] }）

2. 类型 '订阅' 不是分配给输入 '可观测'。在内部ngOnInit（）和ngOnDestroy（）

   ngOnInit（）{ this.globalClick =可观察 .fromEvent（文件， '点击'） .delay（1） 。做（（）=> {该指令（事件：MouseEvent）=> { this.onGlobalClick（event）; }）; }

   ngOnDestroy（）{ this.globalClick.unsubscribe（）; }

如果在角4请让我知道在指令中声明的任何变化，官方文档是在这个问题没有任何帮助。

Answer 1

关于你的plnkr几乎没有什么变化。

1. NgModules，或者更确切地看看框架的Archietcture。该模块中，一旦你注册的内部模块的指令，你不必将其导入内部组件

指令本身看起来不错，我要注册您的组件，服务和directices

的地方。我将你的指令与我在Angular 4.3.5中运行良好的指令进行了比较。

其实，在这种情况下，你不需要任何指令，除非它不会被重复使用。如果您需要将该点击应用于菜单，最好这样做：

将点击事件绑定到您的“内部”选择器。比方说，这是你的菜单：

<ul id="menu" (click)="clickedInside($event)"> <li> .. </li> </ul> 

那么你的组件内部添加clickedInside()功能是这样的：

clickedInside($event: Event){ 
    $event.preventDefault(); 
    $event.stopPropagation(); // <- that will stop propagation on lower layers 
    console.log("CLICKED INSIDE, MENU WON'T HIDE"); 
    } 

最后，你可以使用Host Listener在组件绑定也点击文档

休息

@HostListener('document:click', ['$event']) clickedOutside($event){ 
    // here you can hide your menu 
    console.log("CLICKED OUTSIDE"); 
    }