单击另一个元素或元素外部（角度 4）时如何删除一个类？

Question

我的页面上有很多这样的对象来定位引导输入组的父 div，因此我可以将样式应用于表单控件的焦点，我不能使用 css 来定位 input-add-on，因为它位于表单控件之前.

我只需要在所选项目上添加一个类，但是当在外部或另一个 div 上单击时如何删除它？我可以在 javascript 中做到这一点，但不知道如何做到 angular 4。添加某种全局函数会更好，但这就是我能做到的。还在学习。提前致谢

<div class="input-group" [ngClass]="{'active': selectedItem === 'item1'}" 
                                          (click)="selectedItem = 'item1'"> 
  <span class="input-group-addon" id="capacity-addon">%</span>
  <input name="capacity" formControlName="capacity" class="form-control" type="text">
</div>

Answer 1

您可以这样做的一种方式，创建directive 并附加您的元素。

import {Directive, ElementRef, Output, EventEmitter, 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);
        }
    }
}

指令使用原生ElementRef(directive associated element) & HostListener(document)和dose task，如果你想阅读可以关注这个帖子：Angular 2: A Simple Click Outside Directive