Как «сбросить» изменения CSS при переходе от компонента?

Question

Так что я почти полностью самоучка и, вероятно, не использую все лучшие практики, и, возможно, это является причиной моей проблемы.В основном я использую jQuery, чтобы изменить прозрачность элемента при наведении мыши.Мне бы хотелось, чтобы эта непрозрачность была «сброшена» (возвращена к 0), когда я ухожу из этого компонента, поэтому событие jQuery нужно выполнять снова каждый раз.

Я пытался внести изменениев ngOnDestroy (я предполагаю, что это будет подходящим хуком жизненного цикла для этого) путем непосредственного изменения элементов с помощью чего-то вроде document.getElementsById () ... (я знаю, что это должен быть ужасный подход).

IЯ пытался найти способ «сбросить» CSS с помощью jQuery, но не знаю, как к этому приблизиться.

JQuery находится в теге script в моем файле index.html:

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

Теперь, когда я вернусь на эту страницу и компонент снова будет отрисован, у .children должна быть непрозрачность 0, но они видны.

Есть ли какое-нибудь простое решение для этого?Или есть гораздо лучший способ достичь того, что я пытаюсь сделать в первую очередь?У меня есть другой jQuery в моем index.html, который я также использую для различных целей Materialise CSS.Если бы существовал лучший метод наилучшей практики, я бы хотел знать.

Answer 1

Почему вы используете jQuery с angular7? Конечно, есть способ не делать этого.

Также вы можете использовать переменные в вашем файле TS и включать и выключать их в различных хуках жизненного цикла.

* 1005 т.е. *

private childrenVisible = false;

...

ngOnInit() {
    this.childrenVisible = true
}

...

ngOnDestroy() {
    this.childrenVisible = false
}

Затем в своем шаблоне html вы можете добавить следующие элементы для ваших детей [ngClass]={'is-active':childrenVisible}