*/
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*/
        };
    }
}

对于那些试图在*ngIf或*ngSwitchCase中获取组件实例的人，你可以遵循这个技巧。

创建一个init指令。

import {
    Directive,
    EventEmitter,
    Output,
    OnInit,
    ElementRef
} from '@angular/core';

@Directive({
    selector: '[init]'
})
export class InitDirective implements OnInit {
    constructor(private ref: ElementRef) {}

    @Output() init: EventEmitter<ElementRef> = new EventEmitter<ElementRef>();

    ngOnInit() {
        this.init.emit(this.ref);
    }
}

导出名称为myComponent的组件

@Component({
    selector: 'wm-my-component',
    templateUrl: 'my-component.component.html',
    styleUrls: ['my-component.component.css'],
    exportAs: 'myComponent'
})
export class MyComponent { ... }

使用这个模板获取ElementRef和MyComponent实例

<div [ngSwitch]="type">
    <wm-my-component
           #myComponent="myComponent"
           *ngSwitchCase="Type.MyType"
           (init)="init($event, myComponent)">
    </wm-my-component>
</div>

在TypeScript中使用此代码

init(myComponentRef: ElementRef, myComponent: MyComponent) {
}

 */
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*/
        };
    }
}

角4 +: 使用渲染器。使用CSS选择器来访问元素。

我有一个最初显示电子邮件输入的表单。输入电子邮件后，表单将被扩展，允许他们继续添加与他们的项目相关的信息。但是，如果他们不是现有的客户，表单将在项目信息部分上面包含一个地址部分。

到目前为止，数据输入部分还没有被分解成组件，所以这些部分是用*ngIf指令管理的。如果他们是现有客户，我需要将焦点设置在项目笔记字段，如果他们是新客户，则需要将焦点设置在名字字段。

我尝试了这些解决方案，但没有成功。然而，这个答案中的更新3给了我最终解决方案的一半。另一半来自MatteoNY的回复。结果是:

import { NgZone, Renderer } from '@angular/core';

constructor(private ngZone: NgZone, private renderer: Renderer) {}

setFocus(selector: string): void {
    this.ngZone.runOutsideAngular(() => {
        setTimeout(() => {
            this.renderer.selectRootElement(selector).focus();
        }, 0);
    });
}

submitEmail(email: string): void {
    // Verify existence of customer
    ...
    if (this.newCustomer) {
        this.setFocus('#firstname');
    } else {
        this.setFocus('#description');
    }
}

因为我所做的唯一一件事是将焦点设置在一个元素上，所以我不需要关心更改检测，所以我实际上可以运行对renderer的调用。在Angular外部选择trootelement。因为我需要给新部分时间来呈现，元素部分被包裹在一个超时中，以允许呈现线程在尝试元素选择之前有时间赶上。一旦所有这些设置，我可以简单地调用元素使用基本的CSS选择器。

我知道这个例子主要处理的是焦点事件，但是我很难理解这个例子不能用于其他上下文中。

更新:Angular在Angular 4中放弃了对Renderer的支持，并在Angular 9中完全删除了它。这个解决方案不应该受到迁移到Renderer2的影响。请参阅此链接以了解更多信息: Renderer迁移到Renderer2

而不是注入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, 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) {
    // ...
  }
}

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

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