web-dev-qa-db-ja.com

Angular 2同じ要素を2回選択して子/要素参照を表示

まず、ドキュメント、いくつかの記事、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番目の要素がまったく着色されないのはなぜですか？

angularviewchild
8
VSO

代わりにelを使用していますel2 2行目。つまり、最初のbackgroundのdivを最初にredに設定し、直後にblueに設定しますが、 2番目の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";
12
Stefan Svrkota