Question

因此，我几乎完全是自学成才，可能没有使用所有最佳实践，这也许就是造成我麻烦的原因。基本上，我使用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，我也将其用于各种Materialise CSS用途。如果有更好的最佳实践方法，我想知道。

Answer 1

为什么要在Angular7中使用jQuery？当然，有一种不必这样做的方法。

您还可以在TS文件中使用变量，并在不同的生命周期挂钩中启用和禁用变量。

即

private childrenVisible = false;

...

ngOnInit() {
    this.childrenVisible = true
}

...

ngOnDestroy() {
    this.childrenVisible = false
}

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

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

1 个答案: