使用指令检测角度4中的Click外部元素 [英] Detect Click outside element in angular 4 using directives

问题描述

我已经使用了一个自定义指令来检测角度2中元素外部的点击，但是在角度4中是不可能的.

I have used a custom directive to detect click outside an element in angular 2 but the same is not possible in angular 4.

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

当我尝试在angular-4中使用相同的代码时，出现以下错误:

When I try using the same code in angular-4 I get the following errors:

1. Argument of type '{ template: string; directives: typeof ClickOutside[]; }' is not assignable to parameter of type 'Component'. ==> 

    @Component({
    templateUrl: "",
    directives: [ClickOutside]
    })


2. Type 'Subscription' is not assignable to type 'Observable<MouseEvent>'. in the directive inside ngOnInit() and ngOnDestroy() 

ngOnInit() {
    this.globalClick = Observable
        .fromEvent(document, 'click')
        .delay(1)
        .do(() => {
            this.listening = true;
         }).subscribe((event:MouseEvent) => {
            this.onGlobalClick(event);
         });
}

ngOnDestroy() {
    this.globalClick.unsubscribe();
}

如果angular 4中的指令声明有任何变化，请告诉我，官方文档在这方面没有帮助.

If there is any change in the directive declaration in angular 4 please let me know, the official docs are of no help in this matter.

推荐答案

与plnkr的关系很少.

There are few changes in relation to your plnkr.

1. NgModules ，或者看一下

1. NgModules, or rather take a look on Archietcture of the framework. The module is the place where you should register your components, services and directices
2. Once you registered your directive inside module you don't have to import it inside components

该指令本身对我来说很好.我将您的指令与在Angular 4.3.5中可以正常工作的我的指令进行了比较.

The directive itself looks fine for me. I compared your directive with mine that works fine in Angular 4.3.5.

实际上，在那种情况下，您不需要任何指令，除非不会重复使用它.如果您只需要将clickOutside应用于菜单，则最好这样做:

Actually, you don't need any directive in that case, unless it won't be used repetitive. If you need to apply that clickOutside only for menu it would be better to do sth like that:

将单击事件绑定到您的内部"选择器中.假设这是您的菜单:

Bind click event to your "inside" selector like that. Let's say it's your menu:

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

然后在组件内部添加clickedInside()函数，如下所示:

then inside your component add clickedInside() function like this:

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

最后，您可以在组件中使用主机监听器将click绑定到其他组件文件

And finally you can use Host Listener in your component to bind click also to the rest of document

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

这篇关于使用指令检测角度4中的Click外部元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！