angular2 引用页面元素@ViewChild和ElementRef

最新推荐文章于 2025-09-20 13:11:34 发布

翻译最新推荐文章于 2025-09-20 13:11:34 发布 · 2.7k 阅读

文章标签：

#angular2 #ViewChild #ElementRef

本文介绍了一个使用Angular框架的示例，在该示例中通过`@ViewChild`装饰器获取DOM元素，并在组件初始化完成后修改这些元素的背景颜色。

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";
  }

}