Question

我的页面上有很多这些目标是引导程序输入组的父div，所以我可以在表单控件的焦点上应用样式，我不能用css作为输入加载项的目标，因为它来自表单控件之前

我只需要在所选项目上添加一个类，但是如果在外部或另一个div上单击时如何删除它？我可以在javascript中做到这一点，但不知道怎么做角度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)和剂量任务，如果您想阅读，可以关注此帖：Angular 2: A Simple Click Outside Directive

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

1 个答案: