ngForから個々の生成コンポーネントを参照する

Question

私は以下に含まれているangular2コンポーネントを持っています。 chaptersのリストを生成して*ngFor=タグで表示しますが、これらをng2コンポーネントで個別にターゲティングすることができます（選択した章をハイライト表示できます）。しかし、私は、＃1を得ることはありませんので、私のセレクタが動作しないと私はデフォルトで最初の章を設定することはできません

<p class="chapter 1" #1>1. My First Chapter</p> 

：私は以下のコードはこのような何かを生成するだろうと思ったのでしょう選択されるリスト

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core'; 

@Component({ 
    selector: 'tutorial', 
    template: ` 
<div class="content row"> 
    <div class="chapters col s3"> 
     <h3>Chapters:</h3> 
     <p *ngFor="let chapter of chapters" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p> 
    </div> 
</div> 
` 
}) 
export class bookComponent implements AfterViewInit { 
    public chapters = _chapters; 
    @ViewChild('2') el:ElementRef; 

    ngAfterViewInit() { 
     this.el.nativeElement.className += " clicked"; 
    } 
} 

生成した<p>タグを個別に選択するにはどうすればよいですか？

Answer 1

あなたはケースを使用するために、これは

<p *ngFor="let chapter of chapters; let i=index" (click)="clickedItem = i" [class.clicked]="i == clickedItem" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p> 

export class bookComponent implements AfterViewInit { 
    public chapters = _chapters; 
    clickedItem: number; 
} 

よりangulary方法かもしれません3210

モデルを更新し、ビューをバインドしてモデルをビューに反映させるようにするには、DOMを変更するのではなく、推奨される方法です。

Answer 2

私はNgForループ制御がclickedクラスを追加または削除聞かせ：

<p *ngFor="let chapter of chapters" class="chapter" 
    [class.clicked]="chapter.number === selectedChapterNumber"> 
    {{chapter.number}}. {{chapter.title}} 
</p> 

それからちょうどあなたのコンポーネントのロジックで適切にselectedChapterNumberを設定します。

export class bookComponent { 
    public chapters = _chapters; 
    private selectedChapterNumber = 1; 
} 

Answer 3

あなたは、以下のように要素を選択にHostListenerでディレクティブを使用することができます。

ワーキングデモ：http://plnkr.co/edit/mtmCKg7kPgZoerqT0UIO?p=preview

import {Directive, Attribute,ElementRef,Renderer,Input,HostListener} from '@angular/core'; 

@Directive({ 
    selector: '[myAttr]' 
}) 

export class myDir { 
    constructor(private el:ElementRef,private rd: Renderer){ 
     console.log('fired'); 
     console.log(el.nativeElement); 
    } 

    @HostListener('click', ['$event.target']) 
    onClick(btn) { 
     if(this.el.nativeElement.className=="selected"){ 
      this.el.nativeElement.className =""; 
     }else{ 
      this.el.nativeElement.className ="selected"; 
     } 
    } 
} 

---

//our root app component 
import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    directives:[myDir], 
    template: 
    ` 
    <style> 
    .selected{ 
     color:red; 
     background:yellow; 
    } 
    </style> 
    <div class="content row"> 
    <div class="chapters col s3"> 
     <h3>Chapters:</h3> 
     <p myAttr *ngFor="let chapter of chapters" class="chapter" #{{chapter.number}}>{{chapter.number}}. {{chapter.title}}</p> 
    </div> 
</div> 
    ` 
}) 
export class App { 
    chapters=[{number:1,title:"chapter1"},{number:2,title:"chapter2"},{number:3,title:"chapter3"}] 


}