まず、ドキュメント、いくつかの記事、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";
}
}
最初の要素が青色になり、2番目の要素がまったく着色されないのはなぜですか?
代わりに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";