角2子/要素参照を参照同じ要素を2回選択

Question

まず最初に、私がドキュメント、いくつかの記事、ng-bookの章などを読んだと言って始めましょう。私はまだ良いこれらのことがどのように機能するかを把握する。言ったことで

、次の点を考慮してください

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

@Component({ 
    selector: 'home', 
    template: ` 
    <div>Test</div> 
    <input type="text"#testElem> 
    <input type="text"#testElem2> 
    ` 
}) 


export class HomeComponent{ 

    @ViewChild('testElem') el:ElementRef; 
    @ViewChild('testElem2') el2:ElementRef; 

    ngAfterViewInit() { 
    this.el.nativeElement.style.background = "red"; 
    this.el.nativeElement.style.background = "blue"; 
    } 

} 

Plunker

なぜ私の最初の要素は青色取得ん。また、2番目の要素がすべてで色付けされませんか？

Answer 1

あなたは右blueにした後、その後、あなたはred最初にあなたの最初のdivのbackgroundを設定する意味あなたの二行目、上の代わりにelel2を使用していますが、あなたは二divで何もしない：

this.el.nativeElement.style.background = "red"; 
this.el.nativeElement.style.background = "blue"; 

それは次のようになります。

this.el.nativeElement.style.background = "red"; 
this.el2.nativeElement.style.background = "blue";