如何在 Angular 2 中获取与 ElementRef 关联的组件的引用

关于使用@ViewChild属性decorator ，你应该知道以下几点.

它使用以下Metadata Properties:个

• selector-用于查询的指令类型或名称.
• read-从查询的元素中读取不同的标记.

来自源代码:

export interface ViewChildDecorator {
  /**
   * You can use ViewChild to get the first element or the directive matching 
   * the selector from the
   * view DOM. If the view DOM changes, and a new child matches the selector,
   * the property will be updated.
   *
   * View queries are set before the `ngAfterViewInit` callback is called.
   *
   * **Metadata Properties**:
   *
   * * **selector** - the directive type or the name used for querying.
   * * **read** - read a different token from the queried elements.
   */
  (selector: Type<any>|Function|string, {read}?: {read?: any}): any;
  new (selector: Type<any>|Function|string, {read}?: {read?: any}): ViewChild;
}

如果不提供read参数，@ViewChild()将返回:

• 组件实例(如果有).
• 如果没有应用组件，则为ElementRef实例
• 如果您 Select set read property，则与查询的元素不同

因此，如果你想从子元素身上得到ElementRef，即angular2分量(VerticeControlComponent)，你需要用read: ElementRef明确地告诉他:

@ViewChild('scaleControl', {read: ElementRef}) scaleControl: ElementRef;

然后是inside ngAfterViewInit hook or later，你可以写this.scaleControl.nativeElement来得到DOM元素.

更新

我很早就写过:

• 如果您 Select set read property，则与查询的元素不同

现在我想补充一下我们能读到的内容:

• ElementRef

• TemplateRef个

• ViewContainerRef个

• Provider个

Provider在这里是什么意思？

这意味着，如果我们在特定元素上定义了任何提供者(在组件或指令中)，那么我们就可以读取它.

@Component({
  selector: 'child',
  template: `
   <h2>I'm child</h2>
  `,
  providers: [
    {
      provide: 'test', useValue: 'x'
    }
  ]
})
export class ChildComponent {

}

所以在这个组件中，我们可以写

@ViewChild(ChildComponent, { read: 'test' }) providerToken: string;

才能得到价值x.

100

另见:

• What are all the valid selectors for ViewChild and ContentChild?