Question

This site显示了三个相同的组件（右侧，灰色），这些组件使用不同的参数生成，以便为它们提供不同的内容和选项。（他们为他们的数据调用不同的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>

...并且正在调用重复的子组件的部分未能触发（或触发并立即切换或调用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)

正如您在http://www.w3schools.com/jsref/met_document_queryselector.asp

中所看到的

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

这意味着它只会选择带有＆＃34;过滤器＆＃34;的第一个div。您需要更改选择器或用

替换document.querySelector方法

document.querySelectorAll(".filters")

您可以在http://www.w3schools.com/jsref/met_document_queryselectorall.asp上找到与此相关的文档：

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

但是我会建议更换选择器以确保单击该精确部分，而不是其他2部分。

希望这有帮助。

下次提供更多代码，而不仅仅是点点滴滴，将会有所帮助。谢谢！

重复的组件在Angular 2中相互冲突

1 个答案: