本文介绍了指令在角度 6 外单击的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
限时送ChatGPT账号..我将 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/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/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屋！
更多推荐
[db:关键词]
发布评论