Angular 9 - скрытое взаимодействие viewchild в повторно используемой директиве - PullRequest
Новая
       5

Angular 9 - скрытое взаимодействие viewchild в повторно используемой директиве

0 голосов
/ 04 августа 2020

У меня есть простой шаблон, который делает часть формы прокручиваемой, а контейнер кнопок прикрепляется внизу. Он также отслеживает позицию прокрутки, чтобы изменить стиль (css классы), когда пользователь прокручивает вниз.

Шаблон: 

<form #fullHeightElement class="full-height">
   <div class="scrollable-container>...</div>
   <div class="sticky-bottom" [class.scrolled-bottom]="scrolledToBottom">...</div>
</form>

В компоненте: 

...
@ViewChild('fullHeightElement') fullHeightElement;
...
  @HostListener('window:scroll',['$event']) onScroll(event) {
    const verticalOffset = window.pageYOffset 
          || document.documentElement.scrollTop 
          || document.body.scrollTop || 0;
    
    if ((verticalOffset + window.innerHeight) >= this.fullWidthElement.nativeElement.offsetHeight) {
      this.scrolledToBottom = true;
    } else {
      this.scrolledToBottom = false;
    }
  }

Как я могу сделать это директивой, которую можно будет использовать повторно? Также эта директива должна добавлять классы ко всем div, но это не обязательно.

...