角2中重复分量相互冲突

Question

本站显示了三个相同的组件(在右边，以灰色表示)，它们使用不同的参数生成，为它们提供了不同的内容和选项。(他们正在为数据调用不同的API。)它们包含在主组件中，该组件的属性控制显示的内容、数量等。然而，当单独显示一个子组件时，它工作得很好，但是当多个组件显示时，第一个组件才能工作。实际上，它能工作75%，但是鼠标点击菜单什么也不做。

在我意识到在运行时没有强制执行这种范围之前，我浏览了所有函数和变量，并将其设置为私有变量。为了区分CSS中的实例，我在每个组件标记中添加了一个递增ID，以及一个类来指示一个特定实例是什么类型的生物:日历、Opps指南等等。

这是否值得关注，如果一个处理程序具有相同的名称，那么它将处理来自另一个组件的单击吗？如果是这样的话，我是否可以向每个变量名和方法名添加一个基值，这些变量名和方法名随ID的增加而增加？还是这里还发生了什么事？

这是我的密码。主要部分：

<div class="related-content" [class.toolkit]=
    "asCalendar.length > 1 || asOppsGuide.length > 1 || asProjects.length > 1 || contentTypes.length > 1 || displayLimit.length > 1 || title.length > 1">
  <content-display *ngFor="let t of title; let i=index" 
    class="{{asCalendar[i]? 'calendarApp': asProjects[i]? 'projectsApp': asOppsGuide[i]? 'oppsGuideApp':''}}"
    id="app{{i}}"
    [appId]="'app' + i"
    [title]="t"
    [asCalendar]="asCalendar[i]"
    [asOppsGuide]="asOppsGuide[i]"
    [asProjects]="asProjects[i]"
    [showNameSearch]="showNameSearch[i]"
    [contentTypes]="contentTypes[i]"
    [displayLimit]="displayLimit[i]"
    [locale]="locale"
    [pageId]="pageId"
    [topicFilter]="topicFilter[i]"></content-display>
</div>

..。以及重复的子部件中没有发射的部分(或发射或立即关闭或其他什么的)。toggleFilterMenus()正在被调用，我可以从console.log()中看到它，但是我不知道它被调用的是哪个组件：

<div class="filters" *ngIf="loaded" [class.menu-active]="filterIsClicked" >
  <span class="filter-indicator" (click)="toggleFilterMenus()">Filter</span>
  <span *ngIf="!isMobile() || filterIsClicked">
  <div *ngFor="let menu of menuArray" class="rcMenu" 
      [class.active]="menu.isDisplaying" 
      [class.radio]="menu.singleChoice"
      >
      <div (click)="toggleMenuDisplaying(menu)" class="hotspot" *ngIf="menu.displayArray.length">{{menu.label}}</div><!-- *ngIf="!asOppsGuide && !asCalendar"  -->
      <ul *ngIf="loaded && menu.isDisplaying" >
        <li *ngFor="let menuOption of menu.displayArray" (click)="onSelected(menuOption)" class="rcMenuItem" 
          [class.rcSelected] = "menuOption.isSelected" [innerHtml]="menuOption.label"></li><!-- | uppercase -->
      </ul>
  </div>
  </span>
</div><!--end filters-->

Answer 1

这是否值得关注，如果一个处理程序具有相同的名称，那么它将处理来自另一个组件的单击吗？

答案是否定的。这两个组件之间的范围是不同的，它们不应该相互影响。问题在于您的onOutsideClick方法，更确切地说是document.querySelector(".filters").contains(event.target)

正如您在queryselector.asp中所看到的

定义和使用querySelector()方法返回与文档中指定的CSS选择器匹配的第一个元素。

这意味着它将只选择带有类"filters“的第一个div。您需要更改选择器或将document.querySelector方法替换为

document.querySelectorAll(".filters")

您可以在queryselectorall.asp上找到有关这方面的文档：

定义和使用querySelectorAll()方法返回文档中与指定的CSS选择器匹配的所有元素，作为静态NodeList对象。

不过，我建议替换选择器，以确保单击的是精确的部分，而不是其他两个中的一个。

希望这能有所帮助。

在以后的时间里，提供更多的代码，而不仅仅是零碎的代码，将是很有帮助的。谢谢!