Angular 7, вводящий директиву как поставщик

Question

У меня есть директива, которая прослушивает события колеса, в которых я делаю некоторую логику с дельтой и соответственно изменяю класс в компоненте.

Проблема возникает, когда я внедряю его на одном из компонентов, который работает, но во втором компоненте он читает только начальное значение, а затем значение не обновляется при обновлении в директиве wheel:

Колесная директива

@Directive({ selector: '[mouseWheel]' })
export class MouseWheelDirective implements OnInit {
  profileAnimation = {
    animate : false
  }

  @HostListener('wheel', ['$event']) 
  Wheel(e) {
     if(delta < 180){
         this.profileAnimation.animate = true
     }
  }

в моем компоненте:

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})
export class CreateComponent implements OnInit {
  constructor(private wheelDirective : MouseWheelDirective) {
  }
}

и в html:

<div mouseWheel>
    <div [ngClass]="{'fade-in' : this.wheelDirective.profileAnimation.animate'}"> 
    </div>
</div>

Также я включаю его в провайдеры:

  providers: [
    MouseWheelDirective
  ],

Я не понимаю, почему он работает в одном из моих компонентов, но значение не является динамическим, когда я использую его в другом компоненте. Это потому, что я не должен использовать @Directive в качестве поставщика для инъекций?

Также я попытался использовать сервис, который я добавляю как в директиву, так и в компонент, чтобы использовать его как связь между обоими, и он работает, но это не так. Есть ли лучший подход?