повторяющиеся компоненты, конфликтующие друг с другом в Angular 2

Question

This site показывает три идентичных компонента (справа, в сером цвете), которые генерируются с различными параметрами, чтобы предоставить им различный контент и параметры. (Они вызывают разные API для своих данных.) Они содержатся в главном компоненте, а атрибуты этого компонента управляют отображением, количеством и т. Д. Однако, когда один дочерний компонент отображается отдельно, он отлично работает, но когда более одного отображается только первый. На самом деле, это 75% работает, но щелчок мышью по меню ничего не делает.

Я пропустил и сделал все мои функции и переменные закрытыми, прежде чем понял, что такая область видимости не выполняется во время выполнения. Чтобы различать экземпляры в CSS, я добавляю инкрементный идентификатор к каждому тегу компонента, а также класс, чтобы указать, какое существо представляет собой конкретный экземпляр: Calendar, Opps Guide и т. Д.

Означает ли это, что один обработчик будет обрабатывать щелчок с другого компонента, если у них есть одно и то же имя? Если да, можно ли добавить базовое значение для каждого имени переменной и имени метода, которое увеличивается вместе с идентификатором? Или здесь что-то еще происходит?

Вот мой код. Главный компонент:.

<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 (с) в документе.

Это означает, что он будет выбирать только первый div с классом «фильтры». Вам придется либо изменить селектор или заменить метод document.querySelector с

document.querySelectorAll(".filters") 

Вы можете найти документацию относительно этого на http://www.w3schools.com/jsref/met_document_queryselectorall.asp:

Определение и использование Метод querySelectorAll() возвращает все элементы в документ, который соответствует указанному селектору (ов) CSS, как статический объект NodeList.

Я бы, однако предлагаю заменить селектор, чтобы убедиться, что это точный раздел быть нажат, а не один из другой 2.

Надеется, что это помогает.

Было бы полезно в следующий раз предоставить немного больше кода, а не только биты и куски. Спасибо!