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) {
    // ...
  }
}

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

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

对于*ngIf中的组件，另一种方法是:

我想要选择的组件是在一个div的*ngIf语句中，@ jsgopil的答案上面可能工作(谢谢@ jsgopil !)，但我最终找到了一种避免使用*ngIf的方法，通过使用CSS隐藏元素。

当[className]中的条件为真时，将显示div，使用#命名组件可以工作，并且可以从typescript代码中选择它。当条件为false时，它不会显示，而且我不需要选择它。

组件:

@Component({
    selector: 'bla',
    templateUrl: 'bla.component.html',
    styleUrls: ['bla.component.scss']
})
export class BlaComponent implements OnInit, OnDestroy {
    @ViewChild('myComponentWidget', {static: true}) public myComponentWidget: any;
    @Input('action') action: ActionType; // an enum defined in our code. (action could also be declared locally)

constructor() {
   etc;
}

// this lets you use an enum in the HMTL (ActionType.SomeType)
public get actionTypeEnum(): typeOf ActionType {
    return ActionType;
}

public someMethodXYZ: void {
    this.myComponentWidget.someMethod(); // use it like that, assuming the method exists
}

然后在bla。component.html文件中:

<div [className]="action === actionTypeEnum.SomeType ? 'show-it' : 'do-not-show'">

    <my-component #myComponentWidget etc></my-component>
</div>
<div>
    <button type="reset" class="bunch-of-classes" (click)="someMethodXYZ()">
        <span>XYZ</span>
    </button>
</div>   

和CSS文件:

 ::ng-deep {
    .show-it {
         display: block;   // example, actually a lot more css in our code
    }
    .do-not-show {
        display: none'; 
    }
}

从列表中选择目标元素。从相同的元素列表中选择特定的元素是很容易的。

组件代码:

export class AppComponent {
  title = 'app';

  listEvents = [
    {'name':'item1', 'class': ''}, {'name':'item2', 'class': ''},
    {'name':'item3', 'class': ''}, {'name':'item4', 'class': ''}
  ];

  selectElement(item: string, value: number) {
    console.log("item="+item+" value="+value);
    if(this.listEvents[value].class == "") {
      this.listEvents[value].class='selected';
    } else {
      this.listEvents[value].class= '';
    }
  }
}

html代码:

<ul *ngFor="let event of listEvents; let i = index">
   <li  (click)="selectElement(event.name, i)" [class]="event.class">
  {{ event.name }}
</li>

css代码:

.selected {
  color: red;
  background:blue;
}

对于那些试图在*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) {
}

从@angular/core中导入ViewChild装饰器，如下所示:

HTML代码:

<form #f="ngForm"> 
  ... 
  ... 
</form>

TS代码:

import { ViewChild } from '@angular/core';

class TemplateFormComponent {

  @ViewChild('f') myForm: any;
    .
    .
    .
}

现在你可以使用'myForm'对象来访问类中的任何元素。

源

而不是注入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);
  }
}

获取任意投影内容

参见访问传输的内容