全球"Trigger function on hover" in 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：显然有更好的方法，它们是指令！感谢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网站上的Heros之旅教程。它涵盖了创建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);
}
}