如何在 Angular 应用程序中检测外部点击

了解如何使用 HostListener 装饰器来检测 Angular 应用程序中元素外部的点击。针对常见 UI 场景的简单有效的解决方案。

先决条件

• Angular 2 或更高版本的基础知识
• 视觉工作室代码
• 已安装节点和 NPM
• 引导程序

创建一个 Angular 项目

使用以下命令创建 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 运行应用程序并检查结果。

单击按钮，然后单击组件中任意位置的外部。

#angular