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的{{1}}设置为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";

角度2视图子/元素参考选择相同的元素两次

1 个答案: