了解如何使用 HostListener 装饰器来检测 Angular 应用程序中元素外部的点击。针对常见 UI 场景的简单有效的解决方案。
先决条件
使用以下命令创建 Angular 项目。
ng new angapp
现在使用以下命令安装 Bootstrap,
npm install bootstrap --save
现在打开 styles.css 文件并添加 Bootstrap 文件引用。要在 styles.css 文件中添加引用,请添加此行。
@import '~bootstrap/dist/css/bootstrap.min.css';
现在使用以下命令创建一个新组件,
ng g c actionmenu
现在打开 actionmenu.component.html 文件并添加以下代码。
<div class="sidebar {{show}} panel-group" clickOutside (clickOutside)="works()">
<div class=" panel panel-default" >
<div>
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
现在打开 actionmenu.component.ts 文件并添加以下代码。
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-actionmenu',
templateUrl: './actionmenu.component.html',
styleUrls: ['./actionmenu.component.css']
})
export class ActionmenuComponent {
@Input() show: boolean=true;
works() {
this.show = !this.show;
}
}
现在打开 actionmenu.component.css 文件并添加以下代码。
.sidebar {
display: none;
}
.true {
display: block;
}
.false {
display: none;
}
现在打开 app.component.html 文件并添加以下代码。
<div class="container" style="margin-top:10px;margin-bottom: 24px;">
<div class="col-sm-12 btn btn-info">
How to detect clicks outside in Angular Application
</div>
</div>
<div class="container">
<button type="button" class="btn btn-success" (click)="show = !show">Primary</button>
<app-actionmenu [show]="show"></app-actionmenu>
</div>
现在打开 app.component.ts 文件并添加以下代码。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Angular App';
show:boolean= false;
}
现在使用以下命令创建一个新指令,并在该指令中添加以下代码。
ng g directive clickOutside
import { Directive, ElementRef, Input, Output, HostListener, EventEmitter } from '@angular/core';
@Directive({
selector: '[clickOutside]'
})
export class ClickOutsideDirective {
constructor(private elementRef: ElementRef) {}
@Output() clickOutside: EventEmitter<any> = new EventEmitter();
@HostListener('document: click', ['$event.target']) onMouseEnter(targetElement:any) {
const clickInside = this.elementRef.nativeElement.contains(targetElement);
if (!clickInside) {
this.clickOutside.emit(null);
}
}
}
现在打开 app.module.ts 和以下代码。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ActionmenuComponent } from './actionmenu/actionmenu.component';
import { ClickOutsideDirective } from './click-outside.directive';
@NgModule({
declarations: [
AppComponent,
ActionmenuComponent,ClickOutsideDirective
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在使用 npm start 运行应用程序并检查结果。
单击按钮,然后单击组件中任意位置的外部。