UX-эффекты в Angular 2

Question

Я не хочу добавлять некоторые взаимодействия в мой проект Angular 2, чтобы улучшить его пользовательский интерфейс. Я знаю, как взаимодействовать с DOM или изменять статус свойства element. Можно написать код для каждого из моих компонентов. Но есть несколько примеров, которые будут использоваться на сайте, для которых я не хочу повторять код везде, где я хочу его использовать.

Простой пример: затухает при прокрутке элементов. Я знаю, как добиться этого в определенном контроллере, но мне нужна помощь, чтобы сделать это поведение глобальным без повторения кода.

I Javascript/jQuery, мы можем включить в него главный файл js, который будет иметь прослушиватели событий, связанные с элементами, которые доступны для всех страниц. Как добиться аналогичного в Угловом?

Answer 1

Это можно сделать главным образом с помощью директив. Берем пример, вы можете создать [scroll-fade] директиву:

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

} 

Вы бы тогда нужно слушать для глобального события прокрутки, с @HostListener('window:scroll') и применить стили к :host элементу.

Вы бы затем использовать его, применяя его к элементам, которые вы хотите пострадавший: <div class="scroller" scroll-fade></div>

Если вам нужно что-то более сложное, вы всегда можете создать модуль Shared где бы создавать повторно используемые компоненты, без повторения коды - который затем можно преобразовать в библиотеку и поделиться с сообществом.

Theres ответ here on StackOverflow, который объясняет, как это сделать.