Глобальная «функция запуска при наведении» в Angular2

Question

Я бы хотел сделать это:

$('button.hoverSoundOne').hover(function() {
    this.configService.playSound('HoverOne');
});

$('button.clickSoundOne').click(function() {
    this.configService.playSound('clickOne');
});

Но хотя в jQuery это всего 6 строк, похоже, что в Angular это займет более 40 строк кода, по одному разу для каждой кнопки в моем приложении. Я не уверен, как это сделать ... глобально, в Angular.

Каков наилучший способ сделать это в Angular?

---

Редактировать : Чтобы прояснить мою цель, я добавляю звуки к каждой кнопке в игре. Например, у меня есть

1. Кнопки заголовка,
2. кнопки лобби,
3. игровые кнопки,
4. Кнопки включения,
5. кнопки Facebook,
6. и т.д.

Некоторые из них имеют собственный звуковой эффект, но большинство используют общий звуковой эффект.

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

<audioButton [class]="" [hoverSound]="" [clickSound]="" (click)="">ClickMe</audioButton>

но я надеялся, что есть лучший способ.

Редактировать # 2 : Очевидно, что есть лучший способ, и они Директива s! Спасибо cgTag за столь красивое решение.

Answer 1

В конце концов, это финальная версия моего кода, и она прекрасно работает.

// 1: (Real Use case):
// <button appSoundClick="aaaa.mp3" appSoundHover="bbbb.mp3"></button>

// 2: (Does nothing because the button is disabled):
// <button appSoundHover="aaaa.mp3" disabled="true"></button>

// 3: (uses default sound bbbb.mp3 on click):
// <div appSoundClick></div>


@Directive({
  selector: '[appSoundHover]'
})
export class SoundHoverDirective {
  @Input() appSoundHover: string;

  public constructor(private configService: ConfigurationService) {}

  @HostListener('mouseenter')
  public mouseenter() {
    if (!this.appSoundHover) {
      this.appSoundHover = 'bbbb.mp3';
    }
    this.configService.playSound(this.appSoundHover);
  }
}

@Directive({
  selector: '[appSoundClick]'
})
export class SoundClickDirective {
  @Input() appSoundClick: string;

  public constructor(private configService: ConfigurationService) {}

  @HostListener('click')
  public click() {
    if (!this.appSoundClick) {
      this.appSoundClick = 'bbbb.mp3';
    }
    this.configService.playSound(this.appSoundClick);
  }

}

Answer 2

У вас здесь два разных поведения. Поведение и щелчок поведения на разных селекторах. Таким образом, вы можете создать две разные директивы или одну директиву со входом для управления поведением.

$('button.hoverSound').hover(function() {
    this.configService.playSound('Hover');
});

$('button.clickSound').click(function() {
    this.configService.playSound('click');
});

Вышеуказанное будет реализовано как стипендиаты

@Directive({selector:'button.hoverSound'})
export class HoverSoundDirective {
     public constructor(private configService: ConfigService) {}
     @HostListener('mouseover')
     public mouseOver() {
         this.configService.playSound('Hover');
     }
}

@Directive({selector:'button.clickSound'})
export class HoverSoundDirective {
     public constructor(private configService: ConfigService) {}
     @HostListener('click')
     public click() {
         this.configService.playSound('Click');
     }
}

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

Лучше отбросить то, что вы сделали с jQuery, и начать заново с Angular / React / Vue и подходить к проблемам из дизайна веб-компонента.

ОБНОВЛЕНИЕ:

Вы можете использовать входные параметры для настройки работы директивы. Я рекомендую вам прочитать руководство Tour of Heros на веб-сайте Angular. Который охватывает тему создания веб-компонентов.

https://angular.io/tutorial

Создать общую директиву для игры:

@Directive({selector:'button[playable]'})
export class PlayableDirective {

     public constructor(private configService: ConfigService) {}

     @Input('playable') playable: string;

     @Input() hover: boolean = false;

     @HostListener('mouseover')
     public mouseOver() {
         if(this.hover) {
             this.configService.playSound(this.playable);
         }
     }

     @HostListener('click')
     public click() {
         if(!this.hover) {
             this.configService.playSound(this.playable);
         }
     }
}

Вышеуказанное создает директиву, которая будет воспроизводить звук при нажатии кнопки. HTML-разметка будет выглядеть следующим образом.

 <button playable="Powerups">Click Me</button>

Вы можете добавить параметр, чтобы использовать состояние наведения для воспроизведения звука.

 <button playable="Powerups" [hover]="true">Click Me</button>

Какие входы и логика вы используете внутри директивы, зависит от вас.