Question

我不想在我的Angular 2项目中添加一些互动来增强其用户体验。我知道如何与DOM交互，或更改元素属性的状态。可以为我的每个组件编写代码。但是有些例子会在网站范围内使用，我不想在任何地方重复使用它。

一个简单的例子是在滚动元素时淡入。我知道如何在特定的控制器中实现这一点，但是我需要帮助才能使这种行为全局化，而不需要重复代码。

我是Javascript / jQuery，我们可以包含一个主js文件，它将事件监听器绑定到元素，这些元素可用于所有页面。如何在Angular中实现类似？

Answer 1

这主要可以通过指令完成。举个例子，你会创建一个[scroll-fade]指令：

@Directive({
  selector: '[scroll-fade]'
})
export class ScrollFade {

}

然后您需要使用@HostListener('window:scroll')收听全局滚动事件，并将您的样式应用于:host元素。

然后，您可以将它应用于您想要受影响的元素： <div class="scroller" scroll-fade></div>

如果您需要更复杂的东西，您可以随时构建一个共享模块，您可以在其中创建可重用的组件，而无需重复代码 - 然后您可以将其转换为库并与社区共享。

Theres一个答案here on StackOverflow，解释了如何。