Указатель атрибута Angular 5 не работает на событиях мыши - PullRequest
Новая
       30

Указатель атрибута Angular 5 не работает на событиях мыши

0 голосов
/ 12 июня 2018

У меня проблема с директивой атрибута.Я следовал инструкции .

, сгенерированной с использованием CLI, поэтому я использовал ng g directive <directivename> и намеренно помещен на верхний уровень вместе с app.module.ts.

My app.module.ts выглядит следующим образом (и я, должно быть, пропустил весь импорт из-за собственных названий модулей): 

// Directives
import { EventhoverDirective } from './eventhover.directive';

@NgModule({
  declarations: [
    // all the relevant component inputs are here
    EventhoverDirective
  ],
  imports: [
   // modules are here
  ],
  providers: [
    // providers are here
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Сама директива выглядит так: 

import { Directive, HostListener, OnInit, Renderer2, ElementRef } from '@angular/core';

@Directive({
  selector: '[appEventhover]'
})
export class EventhoverDirective implements OnInit {

  constructor(private el: ElementRef, private renderer: Renderer2) { }

  ngOnInit() {
    console.log('Directive called');
  }

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight('blue');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  highlight(color: string) {
    this.renderer.setStyle(this.el.nativeElement, 'color', color);
  }

}

И я использую его внутри HTML следующим образом: 

<div class="container top-spacer">
  <div class="row text-center" >
    <div appEventhover class="col event" *ngFor="let event of eventList" (click)="storeEvent(event.job)">
      <img class="img-responsive" src="{{backendRoute}}/{{event.track_image_off}}">
      <p > {{event.name}} </p>
    </div>
  </div>
</div>

Однако он не работает.Это даже не выдает ни ошибки, ни чего-либо еще.Что я могу делать не так?

Заранее благодарю за помощь.

Ответы [ 2 ]

0 голосов
/ 05 мая 2019

Просто чтобы добавить к уже предоставленным ответам и поделиться тем, что я узнал из опыта.Директива и компонент, где она должна использоваться, должны быть включены в один и тот же модуль.См. Описание ниже.

Предполагается, что у вас есть два модуля A и B с компонентами Ac и Bc соответственно, а затем директива D. Чтобы использовать D в Ac, оба D и Ac должны быть включены в модуль A, то естьвезде, где включен Ac, D также должен быть включен.

А что касается Bc, поскольку D уже включен в модуль A, он не может быть снова включен в модуль B, в противном случае вы получите ошибку множественного объявления, но D все равно не вступит в силу для Bc на этом этапе.

Решение для Bc подразумевало бы перемещение D, Ac и Bc в общий модуль, где эти три могут быть включены в одном месте.

Под включением я подразумеваю нечто похожее на пример ниже.Также обратите внимание, что это решение основано на Angular 5 

@NgModule({
    imports: [
       ***
    ],
    declarations: [**your directive and component**],
    providers: [***],
})
0 голосов
/ 12 июня 2018

Ваш код директивы работает.Вот оно в стекаблиц .Сама директива идентична.Я применил его к простому элементу <p> и к <div>, используя *ngFor.

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

...