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用作可注射提供程序吗？

我也尝试使用一种服务，该服务同时注入了指令和组件，以将其用作两者之间的链接，并且可以正常工作，但是感觉不对。有更好的方法吗？

Angular 7注入指令作为提供者

0 个答案: