离开组件时如何“重置”CSS更改？答案

【问题标题】：How do I "reset" CSS changes when navigating away from a component?离开组件时如何“重置”CSS更改？
【发布时间】：2019-09-02 14:30:04
【问题描述】：

所以我几乎完全是自学成才，可能没有使用所有最佳实践，也许这就是我遇到麻烦的原因。基本上我使用 jQuery 来改变鼠标悬停时元素的不透明度。当我离开该组件时，我希望该不透明度被“重置”（返回为 0），因此每次都必须再次执行 jQuery 事件。

我已经尝试通过使用类似 document.getElementsById() 的方式直接修改元素来在 ngOnDestroy 中进行更改（我认为这将是适当的生命周期挂钩）...（我知道这一定很糟糕接近）。

我尝试过研究一种使用 jQuery“重置”CSS 的方法，但不知道如何解决。

jQuery 在我的 index.html 文件中的脚本标记中：

$('.parent').mouseover(function() {
          $('.children').animate(
            {
              opacity: 1.0
            },
            1250,
            function() {}
          )
        })

现在，当我导航回此页面并再次呈现组件时，.children 的不透明度应该为 0，但它们是可见的。

有什么简单的解决方法吗？还是有更好的方法来实现我首先要做的事情？我的 index.html 中有其他 jQuery，我也将其用于各种 Materialize CSS 目的。如果有更好的最佳实践方法，我想知道。

【问题讨论】：

作为建议：不要混合使用 Angular 和 jquery。检查this post虽然引用了angularjs（不是angular），但主要概念是一样的

标签： jquery css angular angular7

【解决方案1】：

你为什么在 Angular7 中使用 jQuery？当然有办法不必这样做。

您还可以在 TS 文件中使用变量，并在不同的生命周期挂钩中打开和关闭它们。

即

private childrenVisible = false;

...

ngOnInit() {
    this.childrenVisible = true
}

...

ngOnDestroy() {
    this.childrenVisible = false
}

然后在您的模板 html 中，您可以将以下内容添加到您的子项 [ngClass]={'is-active':childrenVisible}

【讨论】：