指令在角度 6 外单击 [英] directive click outside angular 6

问题描述

我将 Angular 从 4 升级到 6，因此我的点击策略出现问题，它停止在所有组件上工作.

我的指令:

import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';@指示({选择器:'[clickOutside]'})导出类 ClickOutsideDirective {构造函数(私有_elementRef:ElementRef){}@输出()public clickOutside = new EventEmitter();@HostListener('document:click', ['$event.target'])公共点击(目标元素){const clickedInside = this._elementRef.nativeElement.contains(targetElement);如果(！clickedInside){this.clickOutside.emit(null);}}}

我的 component.html 使用了这个指令:

<divid=sidenav"*ngIf=this.opened"class =sidenav"[ngClass]="getClasses()";[ngStyle]="getStyles()";单击外部(clickOutside)="closeOutsideSidenav()";><标题>{{ navTitle }} </header><我*ngIf=this.showCloseButton"；class =iconicicic-x-thin close-icon"(点击)=closeSidenav()"；></i><ng-content></ng-content>

解决方案

您在模板中引用了 "this"，这是不必要的.我做了一个该指令的工作示例:

https://stackblitz.com/edit/angular-piqewb

并且没有理由在 div 上设置两次指令.

<div id="sidenav" *ngIf="opened" class="sidenav" [ngClass]="getClasses()" [ngStyle]="getStyles()" (clickOutside)="closeOutsideSidenav()"><标题>{{ navTitle }} </header><i *ngIf="showCloseButton" class="iconicicicicic-x-thin close-icon" (click)="closeSidenav()"></i><ng-content></ng-content>

<div *ngIf="backdrop &&opened" class="sidenav-backdrop"></div>

I upgraded my Angular from 4 to 6, and consequently had a problem with my click-off policy, it stopped working on all components.

my directive:

import { Directive, Output, EventEmitter, ElementRef, HostListener } from '@angular/core';
    
@Directive({
  selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    
  constructor(private _elementRef : ElementRef) { }
    
  @Output()
  public clickOutside = new EventEmitter();
   
  @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const clickedInside = this._elementRef.nativeElement.contains(targetElement);
    if (!clickedInside) {
        this.clickOutside.emit(null);
    }
  }
}

My component.html that makes use of this directive:

<div 
  id="sidenav" 
  *ngIf="this.opened" 
  class="sidenav" 
  [ngClass]="getClasses()" 
  [ngStyle]="getStyles()" 
  clickOutside 
  (clickOutside)="closeOutsideSidenav()"
>
  <header> {{ navTitle }} </header>
  <i 
    *ngIf="this.showCloseButton" 
    class="iconic iconic-x-thin close-icon" 
    (click)="closeSidenav()"
  ></i>
  <ng-content></ng-content>
</div>
<div 
  *ngIf="this.backdrop && this.opened" 
  class="sidenav-backdrop"
></div>

解决方案

You're referencing "this" in your template, which is not necessary. I made a working example of that directive:

https://stackblitz.com/edit/angular-piqewb

And theres no reason to have the directive on the div twice.

<div id="sidenav" *ngIf="opened" class="sidenav" [ngClass]="getClasses()" [ngStyle]="getStyles()" (clickOutside)="closeOutsideSidenav()">
    <header> {{ navTitle }} </header>
    <i *ngIf="showCloseButton" class="iconic iconic-x-thin close-icon" (click)="closeSidenav()"></i>
    <ng-content></ng-content>
</div>

<div *ngIf="backdrop && opened" class="sidenav-backdrop"></div>

这篇关于指令在角度 6 外单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！