Angular 2 View Child/Element Ref Выбор одного и того же элемента Дважды

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

Почему мой первый элемент получить окрашены в синий цвет, а второй элемент не окраситься вообще?

Answer 1

Вы используете el вместо el2 на второй линии, что означает, что вы установите background из вашего первого div к red первым, а затем сразу же после того, как к blue, но вы ничего не делаете с вашим вторым 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";