如何在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:

可以看出，引用不是null，并且组件的所有属性都在其中.我想访问这些属性，但是在代码中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

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...

我在这里想念什么?

推荐答案

关于使用它使用以下元数据属性:

• 选择器-指令类型或用于查询的名称.
• 读取-从查询的元素中读取不同的令牌.

• 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.

示例

Example

另请参阅:

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

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