我不想向我的 Angular 2 项目添加一些交互来增强其用户体验。我知道如何与 DOM 交互，或者更改元素属性的状态。可以为我的每个组件编写代码。但有一些示例将在整个站点范围内使用，为此我不想在我想要使用它的所有地方重复代码。
一个简单的例子是滚动时淡入元素。我知道如何在特定 Controller 中实现此目的，但我需要帮助才能使此行为全局化而无需重复代码。
在 Javascript/jQuery 中，我们可以包含一个主 js 文件，该文件将事件监听器绑定(bind)到元素，该元素可用于所有页面。如何在 Angular 中实现类似的效果？
最佳答案
这主要可以通过指令来完成。以您的示例为例，您将创建一个 [scroll-fade]指令:
@Directive({
selector: '[scroll-fade]'
})
export class ScrollFade {
}
然后您需要监听全局滚动事件，使用 @HostListener('window:scroll')并将您的样式应用到 :host元素。
然后，您可以通过将其应用于您想要受影响的元素来使用它:
<div class="scroller" scroll-fade></div>
如果您需要更复杂的东西，您始终可以构建一个共享模块，在其中创建可重用的组件，而无需重复代码 - 然后您可以将其转换为库并与社区共享。
有答案 here on StackOverflow这解释了如何做。
关于javascript - Angular 2 中的 UX 效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42032401/