Rxjs событие пузыряется в родительском компоненте в угловом приложении - PullRequest
Новая
       7

Rxjs событие пузыряется в родительском компоненте в угловом приложении

0 голосов
/ 02 июля 2018

Вот проблема:

  • У меня есть родительский компонент main
  • Я включил дочерние компоненты home, catalog,work,solutions,contactus
  • У меня есть подписка rxjs на mousewheel ,swipedown,swipeup в main(parent) компонент на одном элементе-обертке, который содержит другой компонент (см. Main.component.html), так что когда я перемещаю курсор мыши / swipeup, вниз отдельный компонент приходит в поле зрения. (Демострируется в stackblitz .. просто сделайте mouswwheel вниз / вверх)
  • У меня есть одно модальное всплывающее окно / оверлей во всех других компонентах (в Stackblitz в компоненте Home)
  • Проблема в том, что когда я поворачиваю мышь над оверлеем дома (дочерний компонент) запуск колесика мыши в родительском компоненте и переход к следующему компоненту в поле зрения. В идеале события колесика мыши и прокрутки не должны срабатывать при наложении

main.component.ts: 

import { Component, Inject, ViewChild, ElementRef, Renderer2, OnInit, HostListener } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { fromEvent, empty } from 'rxjs';
import { debounceTime, map, merge, take, first, combineLatest, concatMap, takeUntil, elementAt, catchError, filter } from 'rxjs/operators';
@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  index = 0;
  public theme: string;
  public isModalOpened = false;
  selectedIndex = 0;
  public themeData;
  public totalChildren;
  public openSideMenu = false;
  @ViewChild('scrollMe') scrollMe: ElementRef;
  // @ViewChild('scrollTop') scrollTop: ElementRef;

  constructor(@Inject(DOCUMENT) private document: any, private renderer: Renderer2) {

  }

  ngOnInit() {
    fromEvent(this.scrollMe.nativeElement, 'wheel').pipe(
      debounceTime(200)
    ).subscribe((e: WheelEvent) => {
      console.log(e)
      if (e.deltaY > 0) {
        this.moveToNextSection();
      } else {
        this.moveUp();
      }
    });

    this.themeData = {
      0: 'dark',
      1: 'semi_light',
      2: 'light',
      3: 'light',
      4: 'dark',
      5: 'light',
      6: 'semi_light',
      7: 'semi_light'
    };

    this.theme = this.themeData[0];
    const mouseEventToCoordinate = mouseEvent => {
      // mouseEvent.preventDefault();
      return {
        x: mouseEvent.clientX,
        y: mouseEvent.clientY
      };
    };

    const touchEventToCoordinate = touchEvent => {
      // touchEvent.preventDefault();
      return {
        x: touchEvent.changedTouches[0].clientX,
        y: touchEvent.changedTouches[0].clientY
      };
    };

    const mouseDowns = fromEvent(this.scrollMe.nativeElement, 'mousedown').pipe(
      map(mouseEventToCoordinate)
    );

    const mouseMoves = fromEvent(this.scrollMe.nativeElement, 'mousemove').pipe(
      map(mouseEventToCoordinate)
    );
    const mouseUps = fromEvent(this.scrollMe.nativeElement, 'mouseup').pipe(
      map(mouseEventToCoordinate)
    );

    const touchStarts = fromEvent(this.scrollMe.nativeElement, 'touchstart').pipe(
      map(touchEventToCoordinate)
    );
    const touchMoves = fromEvent(this.scrollMe.nativeElement, 'touchmove').pipe(
      map(touchEventToCoordinate)
    );
    const touchEnds = fromEvent(this.scrollMe.nativeElement, 'touchend').pipe(
      map(touchEventToCoordinate)
    );

    const starts = mouseDowns.pipe(
      merge(touchStarts)
    );
    const moves = mouseMoves.pipe(
      merge(touchMoves)
    );
    const ends = mouseUps.pipe(
      merge(touchEnds)
    );

    starts.pipe(
      concatMap((dragStartEvent) => {
        return moves.pipe(
          takeUntil(ends),
          elementAt(3),
          catchError(err => empty()),
          map(ev => {
            const intialDeltaX = ev.x - dragStartEvent.x;
            const initialDeltaY = ev.y - dragStartEvent.y;
            return { x: dragStartEvent.x, y: dragStartEvent.y, intialDeltaX, initialDeltaY };
          })
        );
      })
    ).subscribe(res => {
      if (Math.abs(res.intialDeltaX) < Math.abs(res.initialDeltaY)) {
        if (res.initialDeltaY < 0) {
          this.moveToNextSection();
        } else {
          this.moveUp();
        }
      }
    });

  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;
    this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
  }

  moveToNextSection() {
    const elementLength = this.scrollMe.nativeElement.children.length;
    if ((this.index + 1) < elementLength) {
      this.index++;
      this.theme = this.themeData[this.index];
      this.selectedIndex = this.index;

      const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;
      this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
    }
  }

  moveUp() {
    const elementLength = this.scrollMe.nativeElement.children.length;
    if (((this.index - 1) < elementLength) && this.index !== 0) {
      this.index--;
      this.theme = this.themeData[this.index];
      this.selectedIndex = this.index;
      const elementTopPosition = this.scrollMe.nativeElement.children[this.index].offsetTop;
      this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${elementTopPosition}px,0px)`);
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
    }
  }

  moveToIndividualSection(i) {
    this.selectedIndex = i;
    if (i === 0) {
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `0`);
      this.index = 0;
      this.theme = this.themeData[this.index];
    } else {
      this.index = i;
      this.theme = this.themeData[this.index];
      // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `1`);
    }
    const individualelementTopPosition = this.scrollMe.nativeElement.children[i].offsetTop;
    this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,-${individualelementTopPosition}px,0px)`);

  }

  scrollToTop() {
    this.selectedIndex = 0;
    this.renderer.setStyle(this.scrollMe.nativeElement, 'transform', `translate3d(0px,0px,0px)`);
    // this.renderer.setStyle(this.scrollTop.nativeElement, 'opacity', `0`);
    this.index = 0;
    this.theme = this.themeData[this.index];
  }

  onModalOpen(ev) {
    this.isModalOpened = ev;
  }

  openMenu() {
    this.openSideMenu = true;
  }
}

main.component.html 

<div class="ey-page">
  <main>
    <div class="bfs-scroll-container" #scrollMe draggable="false">
      <app-home></app-home>
      <app-catalog></app-catalog>
      <app-pivot></app-pivot>
      <app-work></app-work>
      <app-solutions></app-solutions>
      <app-map></app-map>
      <app-contactus></app-contactus>
    </div>
    <div class="ey-slide-scroll-indi" *ngIf="index !==6">
      <a href="#" class="ey-button-next-slide ey-icon-back-arrow-after ey-slide-show-scroll-indi" data-down-button="">
        <img  *ngIf="theme==='dark'" src="assets/images/ic_down-arrow.png" (click)="moveToNextSection()" alt="">
        <img  *ngIf="theme==='light'" src="assets/images/ic_down-arrow-black.png" (click)="moveToNextSection()"
          alt="">
        <img  *ngIf="theme==='semi_light'" src="assets/images/ic_down-arrow-black.png" (click)="moveToNextSection()"
          alt="">
      </a>
    </div>
    <div>
      <div class="ey-slide-nav-container ey-back-link-slide-in">
        <!-- <a class="ey-back-link ey-icon-top-arrow-before no-barba" style="opacity: 0;" #scrollTop (click)="scrollToTop();">
          <!-- <img src="assets/images/up-arrow.png" alt=""> --
        </a> -->
        <div class="ey-progress-bar" [ngClass]="{'hideMenu':isModalOpened}"></div>
        <ul class="ey-slide-nav" [ngClass]="{'light':theme==='light','half_light':theme ==='semi_light'}" [ngStyle]="{'opacity':isModalOpened? '0.3':1}">
          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===0}" (click)="moveToIndividualSection(0)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===1}" (click)="moveToIndividualSection(1)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===2}" (click)="moveToIndividualSection(2)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===3}" (click)="moveToIndividualSection(3)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===4}" (click)="moveToIndividualSection(4)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===5}" (click)="moveToIndividualSection(5)">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===6}" (click)="moveToIndividualSection(6)">
          </li>

          <!-- <li class="ey-slide-nav-item ey-slide-nav-item-numeric" [ngClass]="{'ey-slide-nav-item-selected':selectedIndex===7}" (click)="moveToIndividualSection(7)">
          </li> -->

          <!-- <li class="ey-slide-nav-item ey-slide-nav-item-numeric  opacity-none">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric  opacity-none">
          </li>

          <li class="ey-slide-nav-item ey-slide-nav-item-numeric  opacity-none">
          </li> -->

        </ul>
      </div>
    </div>
  </main>
</div>

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

Структура HTML соответствует https://wavespace.ey.com/

1 Ответ

0 голосов
/ 05 июля 2018

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

$0.addEventListener('wheel', (e) => {console.log('child'); e.stopPropagation()});

и прокрутка.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...