Javascript Rxjs事件在angular应用程序的父组件中冒泡

问题是：

• 我有父组件

  main

• 我已经包括了子组件

  home，
  目录、工作、解决方案、联系人

• 我订阅了rxjs的

  鼠标滚轮、swipedown、swipeup

  main（parent）

  component在一个包装器元素上，该包装器元素包含另一个组件（请参见main.component.html），因此当我将鼠标滚轮/swipeup向上移动时，向下移动 单个组件出现在视图中。（演示在..只需做鼠标向下/向上）
• 我在所有其他组件中都有一个模式弹出/覆盖（在其主组件中）
• 问题是当我在主视图（子组件）中的覆盖层上按下鼠标滚轮时 在父组件中触发鼠标滚轮并移动到视图中的下一个组件。 理想情况下，鼠标滚轮/滑动事件不应在覆盖上触发

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;
  }
}

import{Component，Inject，ViewChild，ElementRef，renderr2，OnInit，HostListener}来自'@angular/core'；
从'@angular/common'导入{DOCUMENT}；
从“rxjs”导入{fromEvent，empty}；
从“rxjs/operators”导入{debounceTime、map、merge、take、first、combinelatetest、concatMap、taketill、elementAt、catchError、filter}；
@组成部分({
选择器：'应用程序主'，
templateUrl:'./main.component.html'，
样式URL:['./main.component.scss']
})
导出类MainComponent实现OnInit{
指数=0；
公共主题：字符串；
public ismodaloped=false；
selectedIndex=0；
公共主题数据；
公共儿童；
public openSideMenu=false；
@ViewChild（'scrollMe'）scrollMe:ElementRef；
//@ViewChild（'scrollTop'）scrollTop:ElementRef；
构造函数（@Inject（DOCUMENT）private DOCUMENT:any，private renderer:render2）{
}
恩戈尼尼特（）{
fromEvent（this.scrollMe.nativeElement，'wheel'）.pipe(
去BounceTime（200）
).订阅（（e:WheelEvent）=>{
控制台日志（e）
如果（e.deltaY>0）{
this.moveToNextSection（）；
}否则{
这个.moveUp（）；
}
});
this.motedata={
0:'暗'，
1:“半光灯”，
二:"轻",，
三:"轻",，
4:‘黑暗’，
五:"轻",，
6:“半光灯”，
7:“半光”
};
this.theme=this.themeData[0]；
常量mouseEventToCoordinate=mouseEvent=>{
//mouseEvent.preventDefault（）；
返回{
x:mouseEvent.clientX，
y:mouseEvent.clientY
};
};
const touchEventToCoordinate=touchEvent=>{
//touchEvent.preventDefault（）；
返回{
x:touchEvent.changedTouches[0]。客户端x，
y:touchEvent.changedTouches[0]。客户端
};
};
const mouseDowns=fromEvent（this.scrollMe.nativeElement，'mousedown'）.pipe(
地图（Mouseeventto坐标）
);
const mouseMoves=fromEvent（this.scrollMe.nativeElement，'mousemove'）.pipe(
地图（Mouseeventto坐标）
);
const mouseUps=fromEvent（this.scrollMe.nativeElement，'mouseup'）。管道(
地图（Mouseeventto坐标）
);
const touchtstarts=fromEvent（this.scrollMe.nativeElement，'touchtstart'）。管道(
映射（touchEventToCoordinate）
);
const touchMoves=fromEvent（this.scrollMe.nativeElement，'touchmove'）.pipe(
映射（touchEventToCoordinate）
);
const touchEnds=fromEvent（this.scrollMe.nativeElement，'touchend'）.pipe(
映射（touchEventToCoordinate）
);
const start=mouseDowns.pipe(
合并（touchStarts）
);
常量移动=mouseMoves.pipe(
合并（触摸移动）
);
const ends=mouseUps.pipe(
合并（触摸端）
);
烟斗(
concatMap（（dragStartEvent）=>{
回流管(
(完)，
元素AT（3），
catchError（err=>empty（）），
地图（ev=>{
const intialDeltaX=ev.x-dragStartEvent.x；
常量initialDeltaY=ev.y-dragStartEvent.y；
返回{x:dragStartEvent.x，y:dragStartEvent.y，initialDeltax，initialDeltaY}；
})
);
})
).订阅（res=>{
if（数学绝对值（初始deltax）<数学绝对值（初始deltay））{
if（res.initialDeltaY<0）{
this.moveToNextSection（）；
}否则{
这个.moveUp（）；
}
}
});
}
@HostListener（'窗口：调整大小'，['$event']））
onResize（事件）{
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.childrence.length；
if（（this.index+1）<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>

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