Javascript 角度2中相互冲突的重复组件_Javascript_Angular_Typescript

Javascript 角度2中相互冲突的重复组件

javascript angular typescript

Javascript 角度2中相互冲突的重复组件,javascript,angular,typescript,Javascript,Angular,Typescript,显示使用不同参数生成的三个相同组件（右侧为灰色），以赋予它们不同的内容和选项。（他们正在为数据调用不同的API。）它们包含在主组件中，该组件的属性控制要显示的内容、数量等。但是，当一个子组件单独显示时，它可以正常工作，但当显示多个子组件时，只有前一个子组件工作。事实上，它75%可以工作，但是鼠标点击菜单什么也做不了在我意识到这种作用域在运行时是不强制的之前，我运行了所有函数和变量，并将它们设置为私有的。为了区分CSS中的实例，我向每个组件标记添加了一个递增的ID，并添加了一个类来指示特定实例是

显示使用不同参数生成的三个相同组件（右侧为灰色），以赋予它们不同的内容和选项。（他们正在为数据调用不同的API。）它们包含在主组件中，该组件的属性控制要显示的内容、数量等。但是，当一个子组件单独显示时，它可以正常工作，但当显示多个子组件时，只有前一个子组件工作。事实上，它75%可以工作，但是鼠标点击菜单什么也做不了

在我意识到这种作用域在运行时是不强制的之前，我运行了所有函数和变量，并将它们设置为私有的。为了区分CSS中的实例，我向每个组件标记添加了一个递增的ID，并添加了一个类来指示特定实例是什么类型的生物：Calendar、Opps Guide等

如果一个处理程序与另一个组件同名，那么该处理程序将处理来自另一个组件的单击，这是否是一个问题？如果是这样的话，有没有一种方法可以为每个变量名和方法名添加一个基值，这个基值随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>

。。。以及重复子组件中未能启动（或启动并立即关闭）的部分。ToggleFilterManus（）正在被调用，我可以从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-->


滤器
{{menu.label}

一个处理程序会处理另一个处理程序的单击，这是一个问题吗组件是否具有相同的名称

答案是否定的。两个组件之间的范围不同，它们不应该相互影响。问题在于onOutsideClick方法，更确切地说是

document.querySelector（“.filters”）.contains（event.target）

正如你在书中看到的

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

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

document.querySelectorAll(".filters")

您可以在以下网站上找到与此相关的文档：

定义和用法 querySelectorAll（）方法将文档中与指定CSS选择器匹配的所有元素作为静态节点列表对象返回

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

希望这有帮助

下一次提供多一点的代码，而不仅仅是零碎的代码，这将是很有帮助的。谢谢