单击任意位置以删除 angular2 中的类答案

【问题标题】：click anywhere to remove a class in angular2单击任意位置以删除 angular2 中的类
【发布时间】：2020-02-05 20:14:37
【问题描述】：

我在 angular2+ 上，并且我有一个具有活动类的元素，例如

<div class="notification active">...</div>

我需要做的是，如果我点击/点击div 上的任何除了，active 类应该被删除。

类似于这个 jquery 示例：https://codepen.io/vlrprbttst/pen/xOoxWo

我很难弄清楚如何添加该活动类，现在我不知道删除它的方法是什么，尤其是如何键入“单击任意位置...”部分。：/

我对检测该类是否存在不感兴趣，如以下问题：remove or add Class in Angular 主要困难不是删除我猜的类，而是“单击任意位置以删除它”部分。

非常感谢任何帮助

【问题讨论】：

参考：stackoverflow.com/questions/50531212/…
为什么不直接使用纯 JS 向 body 添加事件处理程序？这是一个相当简单的解决方案。
@Rich 你能在回答中详细说明一下吗？
document.body.addEventListener('click', handler); 其中handler 只是检查event.target 的内容
@Rich 谢谢，但我对 javascript 完全不满意，不幸的是，我不知道如何处理那行代码 :(。你能帮忙解决一个工作小提琴之类的问题吗？跨度>

标签： angular typescript

【解决方案1】：

抱歉之前的标志，没有足够彻底地阅读您的问题。无论如何，就像 Rich 提到的那样，如果您来自该背景（就像我们大多数人一样），您正在尝试做的事情与 jQuery/javascript 非常相似。

export class AppComponent  {
  name = 'Angular';

  constructor(private eleRef: ElementRef){

  }

  ngAfterViewInit() {
    this.eleRef.nativeElement.querySelector('main').addEventListener('click', this.onClick.bind(this));
  }

  onClick(event: MouseEvent){
    // console.log(event.target)
    let clickedEle = event.target as HTMLElement;
    let aBoxEle = this.eleRef.nativeElement.querySelector('#aBox') as HTMLElement;
    if(clickedEle.id != "aBox"){
      if(aBoxEle.classList.contains("box")){
        aBoxEle.classList.remove("box");
      }else{
        aBoxEle.classList.add("box");
      }
    }
  }
}

你可以试试这个stackblitz example ?

另外，请阅读以下内容：“Thinking in AngularJS” if I have a jQuery background?。为了能够有效地使用 Angular，您必须“忘记”您习惯的 jQuery 的某些部分。

【讨论】：

感谢您的宝贵时间。我有一个问题，这是我的代码：nimb.ws/kUKBfm 但我在控制台中收到错误：错误类型错误：无法读取 null 的属性“addEventListener”
您的<router-outlet> 周围是否有一个显示ContainerElement 的元素？还是您的元素 <div id="ntf"> 嵌套在另一个元素中？检查您的开发人员工具的检查器，确保您在代码上下文中定位正确的元素。
我在您的示例中使用了
并且它可以工作，但是.. 而不是控制台日志，我如何从#ntf div 中删除“活动”类？ :)
let ele = event.target as HTMLElement; 和 ele.classList.add("green");。我已经修改了 stackblitz，如果重新加载，您应该会看到更改。这样做只是将event.target 作为 HTMLElement 类型。通过这种方式，您将能够访问所有函数以随心所欲地操作 DOM。文档在这里：HTMLElement。你也可以这样投let ele = <HTMLElement>event.target.

【解决方案2】：

您可以通过使用 NgClass 执行类似的操作来实现。

component.html

<div (click)="clicked=!clicked" [ngClass]="clicked ? 'active' : 'hidden'">                
     Your content goes here
</div>

所以现在在你的

中定义你的活动和隐藏的css类

component.scss

.active {
    display: block;
}

.hidden {
    display: none;
}

这应该可以解决问题:)

【讨论】：