角2で互いに矛盾するコンポーネントが繰り返される

Question

This siteは、異なるパラメータで生成され、異なる内容とオプションを与える3つの同一のコンポーネント（右側は灰色）を示しています。 （彼らは彼らのデータのために異なったAPIを呼んでいます。）それらはマスターコンポーネントに含まれていて、そのコンポーネントの属性は何を表示するか、何を表示するかなどを制御します。しかし、1つの子コンポーネントを単独で表示すると、最初のものだけが表示されます。実際には、75％は機能しますが、メニュー上のマウスクリックは何もしません。

実行時にその種のスコープが強制されていないことを知る前に、すべての関数と変数を非公開にしました。 CSSのインスタンスを区別するために、各コンポーネントタグにインクリメンタルIDを追加するだけでなく、特定のインスタンスがどのような種類のクリーチャーであるかを示すクラスを追加します：

これは懸念事項です。 1つのハンドラは、同じ名前を持つ場合、別のコンポーネントからのクリックを処理しますか？もしそうなら、各変数名とメソッド名に基底値を追加する方法がありますか？それは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

が、これは、彼らが同じを持っている場合は、1つのハンドラは別の コンポーネントからクリックを処理することを、懸念されます名前？

答えはいいえです。 2つのコンポーネント間のスコープは異なり、互いに影響してはなりません。 問題があなたのonOutsideClick方法であり、より正確document.querySelector(".filters").contains(event.target)

とあなたは（http://www.w3schools.com/jsref/met_document_queryselector.asp

の定義と使用法 querySelector（）メソッドは、指定されたCSSセレクタにマッチする最初の要素を返すに見ることができるようにs）をドキュメントに追加します。

これは、「フィルタ」クラスの最初のdivのみを選択することを意味します。

の定義と使用法 はquerySelectorAll（）メソッドは、内のすべての要素を返す：あなたはhttp://www.w3schools.com/jsref/met_document_queryselectorall.aspにこのについてのドキュメントを見つけることができますあなたのセレクタを変更したり、

document.querySelectorAll(".filters") 

でdocument.querySelector方法を交換する必要があるのいずれか指定されたCSSセレクタに一致するドキュメントを静的なNodeListオブジェクトとして返します。

しかし私は、他の2

の一つは、この情報がお役に立てば幸いその正確な部分がクリックされていることを確認するために、セレクタを交換示唆し、ないでしょう。

ビットとピースだけでなく、少しだけ多くのコードを提供すると便利です。ありがとうございました！