*/
import {Component,ViewChild} from '@angular/core' /*Import View Child*/

@Component({
    selector:'display'
    template:`

     <input #myname (input) = "updateName(myname.value)"/>
     <p> My name : {{myName}}</p>

    `
})
export class DisplayComponent{
  @ViewChild('myname')inputTxt:ElementRef; /*create a view child*/

   myName: string;

    updateName: Function;
    constructor(){

        this.myName = "Aman";
        this.updateName = function(input: String){

            this.inputTxt.nativeElement.value=this.myName; 

            /*assign to it the value*/
        };
    }
}

import { Component, ElementRef, OnInit } from '@angular/core';

@Component({
  selector:'display',
  template:`
   <input (input)="updateName($event.target.value)">
   <p> My name : {{ myName }}</p>
  `
})
class DisplayComponent implements OnInit {
  constructor(public element: ElementRef) {
    this.element.nativeElement // <- your direct element reference 
  }
  ngOnInit() {
    var el = this.element.nativeElement;
    console.log(el);
  }
  updateName(value) {
    // ...
  }
}

示例已更新以使用最新版本

有关本机元素的更多详细信息，请点击这里

而不是注入ElementRef并从那里使用querySelector或类似的方法，可以使用声明式的方式来直接访问视图中的元素:

<input #myname>

@ViewChild('myname') input; 

元素

ngAfterViewInit() {
  console.log(this.input.nativeElement.value);
}

StackBlitz例子

@ViewChild()支持指令或组件类型作为参数，或模板变量的名称(字符串)。 @ViewChildren()还支持以逗号分隔的名称列表(目前不允许@ViewChildren('var1,var2,var3'))。 @ContentChild()和@ContentChildren()做同样的事情，但在轻DOM中(<ng-content>投影元素)。

的后代

@ContentChildren()是唯一一个允许查询后代的

@ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; 

{descendants: true}应该是默认值，但在2.0.0 final中不存在，它被认为是一个bug 这在2.0.1中被修复

read

如果有组件和指令，read参数允许指定应该返回哪个实例。

例如，动态创建的组件需要ViewContainerRef，而不是默认的ElementRef

@ViewChild('myname', { read: ViewContainerRef }) target;

订阅的变化

尽管视图子函数只在调用ngAfterViewInit()时设置，而内容子函数只在调用ngAfterContentInit()时设置，如果你想订阅查询结果的更改，应该在ngOnInit()中完成。

https://github.com/angular/angular/issues/9689#issuecomment-229247134

@ViewChildren(SomeType) viewChildren;
@ContentChildren(SomeType) contentChildren;

ngOnInit() {
  this.viewChildren.changes.subscribe(changes => console.log(changes));
  this.contentChildren.changes.subscribe(changes => console.log(changes));
}

直接DOM访问

只能查询DOM元素，不能查询组件或指令实例:

export class MyComponent {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }

  // for transcluded content
  ngAfterContentInit() {
    var div = this.elRef.nativeElement.querySelector('div');
    console.log(div);
  }
}

获取任意投影内容

参见访问传输的内容

快速使用的最小示例:

import { Component, ElementRef, ViewChild} from '@angular/core';

@Component({
  selector: 'my-app',
  template:
  `
  <input #inputEl value="hithere">
  `,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  @ViewChild('inputEl') inputEl:ElementRef; 

  ngAfterViewInit() {
    console.log(this.inputEl);
  }
}

在感兴趣的DOM元素上放置一个模板引用变量。在我们的例子中，这是<input>标签上的#inputEl。 在组件类中，通过@ViewChild装饰器注入DOM元素 访问ngAfterViewInit生命周期钩子中的元素。

注意:

如果你想操作DOM元素，请使用Renderer2 API而不是直接访问元素。允许直接访问DOM会使应用程序更容易受到XSS攻击

注意:这并不适用于Angular 6及以上版本，因为ElementRef变成了ElementRef<T>， T表示nativeElement的类型。

我想补充一点，如果您正在使用ElementRef，正如所有答案所推荐的那样，那么您将立即遇到一个问题，即ElementRef有一个看起来很糟糕的类型声明

export declare class ElementRef {
  nativeElement: any;
}

这在一个nativeElement是HTMLElement的浏览器环境中是愚蠢的。

要解决这个问题，您可以使用以下技术

import {Inject, ElementRef as ErrorProneElementRef} from '@angular/core';

interface ElementRef {
  nativeElement: HTMLElement;
}

@Component({...}) export class MyComponent {
  constructor(@Inject(ErrorProneElementRef) readonly elementRef: ElementRef) { }
}

要获得紧邻的下一个兄弟姐妹，使用这个

event.source._elementRef.nativeElement.nextElementSibling