我不想为我的Angular 2项目添加一些交互来增强其用户体验。我知道如何与DOM进行交互，或者更改元素属性的状态。可以为每个组件编写代码。但是有一些例子会在网站上使用，为此我不想在任何地方重复使用代码。Angular 2中的UX效果
一个简单的例子将淡入时滚动元素。我知道如何在特定的控制器中实现这一点，但我需要帮助，使这种行为全球无需代码重复。
我使用Javascript/jQuery，我们可以包含一个主js文件，它将事件监听器绑定到元素上，这个元素可用于所有页面。如何在Angular中实现类似？
这大部分可以通过指令完成。以你的例子，你会创建一个[scroll-fade]指令：
@Directive({
selector: '[scroll-fade]'
})
export class ScrollFade {
}
你会那么需要监听全球滚动事件，与@HostListener('window:scroll')并应用样式的:host元素。
你会然后把它应用到你想影响的元素中使用它： <div class="scroller" scroll-fade></div>
如果你需要更复杂的东西，你总是可以建立一个共享的模块，你将创建可重用的组件，但不重复码 - 然后你可以转换成图书馆并与社区分享。
Theres回答here on StackOverflow，解释如何。