你可以通过ElementRef将DOM元素的句柄注入到组件的构造函数中:

constructor(private myElement: ElementRef) { ... }

文档:https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

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

event.source._elementRef.nativeElement.nextElementSibling

对于*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'; 
    }
}

角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

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

组件代码:

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

我用了两种方法:

第一种方法:

你可以通过ElementRef将DOM元素的句柄注入到组件的构造函数中:

constructor(private myElement: ElementRef) {
this.myElement.nativeElement // <- your direct element reference
}

第二种方式:

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

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