如何在 Angular 2 中获取与 ElementRef 关联的组件的引用 [英] How to get reference of the component associated with ElementRef in Angular 2

问题描述

我的模板中有这个组件:

I have this component in my template:

<vector-editor  #scaleControl
                [x]="scaleX"
                [y]="scaleY"
                [z]="scaleZ" >               
</vector-editor>

vector-editor 具有以下结构:

export class VerticeControlComponent implements OnInit
{
    @Input() x: number;
    @Input() y: number;
    @Input() z: number;

    ...
}

在我的应用程序中，我使用

In my application I grab a reference to the #scaleControl using

@ViewChild('scaleControl') scaleControl: ElementRef;

现在，如果我将 scaleControl 输出到控制台，我会得到以下结果:

Now if I output scaleControl to the console I get this result:

可以看出，引用不为空，我的组件的所有属性都在那里.我想访问这些属性，但在代码中，scaleControl 的实际类型是 ElementRef 而不是 VectorEditorControl，如输出中所示.因此，TypeScript 不允许使用 this.scaleControl.x.

As can be seen, the reference is not null and all the properties of my component are there. I want to access those properties, but in code the actual type of the scaleControl is ElementRef and not VectorEditorControl as seen in the output. Because of this, TypeScript doesn't me allow to use this.scaleControl.x.

我也尝试像这样转换 ElementRef

I also tried to cast ElementRef like this

var temp = <VectorEditorControl>this.scaleControl

但是我收到一个错误，告诉我我不能将 ElementRef 转换为 VectorEditorControl

but I get an error telling me that I cannot cast ElementRef to VectorEditorControl

最后，我尝试访问 this.scaleControl.nativeElement 但它未定义...

In the end, I tried to access this.scaleControl.nativeElement but it's undefined...

我在这里遗漏了什么?

推荐答案

关于使用 @ViewChild 属性装饰器.

You should know the following things about using @ViewChild property decorator.

它使用以下元数据属性:

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

• selector - the directive type or the name used for querying.
• read - read a different token from the queried elements.

来自源代码:

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() 将返回:

If you don't provide the read parameter, @ViewChild() will return the:

• 组件实例(如果有).
• ElementRef 实例(如果没有应用组件)
• 如果您设置读取属性
，则与查询元素不同的标记

• component instance if there is.
• ElementRef instance if there is no component applied
• different token from the queried elements if you set read property

因此，如果您想从 angular2 组件 (VerticeControlComponent) 的子组件中获取 ElementRef，则需要使用 read: ElementRef 明确告知:

So if you want to get ElementRef from the child that is angular2 component (VerticeControlComponent) you need to explicitely tell using read: ElementRef:

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

然后在ngAfterViewInit钩子或以后你可以写this.scaleControl.nativeElement来获取DOM元素.

And then inside ngAfterViewInit hook or later you can write this.scaleControl.nativeElement to get DOM element.

我很早就写了:

• 如果您设置读取属性
，则与查询元素不同的标记

• different token from the queried elements if you set read property

现在我想添加我们可以阅读的内容:

Now I want to add what exactly we can read:

• ElementRef

TemplateRef

ViewContainerRef

供应商

Provider 在这里是什么意思?

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

It means that if we defined any provider(in component or directive) on specific element then we can read it.

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

}

所以在这个组件的消费者中我们可以写

So in consumer of this component we can write

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

获取值x.

示例

另见:

• 什么是有效的ViewChild 和 ContentChild 的选择器?

这篇关于如何在 Angular 2 中获取与 ElementRef 关联的组件的引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！