Question

我想这样做：

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

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

但是，虽然在jQuery中只有6行，但似乎在Angular中这将需要40多行代码，对于我应用程序中的每个按钮一次。我不确定如何在Angular中以全局方式执行此操作。

在Angular中最好的方法是什么？

编辑：为阐明我的目标，作为游戏的一部分，我向游戏中的每个按钮添加了声音。例如，我有

标题按钮
大堂按钮
游戏按钮
开机按钮
Facebook按钮，
等

其中一些具有自己的声音效果，但大多数使用通用声音效果。

我可以创建一个看起来像这样的新组件：

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

但是我希望有更好的方法。

编辑＃2 ：显然有一种更好的方法，它们是指令！感谢 cgTag 提供了如此精美的解决方案。

Answer 1

您在这里有两种不同的行为。在不同选择器上的悬停和单击行为。因此，您可以创建两个不同的指令，或者创建一个带有输入的单个指令来控制行为。

$('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开始，并解决Web组件设计中的问题。

已更新：

您可以使用输入参数来配置指令的工作方式。我建议您阅读Angular网站上的《英雄之旅》教程。涵盖了创建Web组件的主题。

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>

在指令中使用什么输入和逻辑取决于您。

Answer 2

最后，这是我代码的最终版本，并且效果很好。

// 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);
  }

}

Angular2中的全局“悬停时触发函数”

2 个答案: