Question

我尝试从其父组件中获取子组件的ElementRef。

@Component({
moduleId: module.id,
selector: 'parent',
templateUrl: 'parent.component.html',
directives: [
  Child1Component,
  Child2Component
  ]
})

在Child1Component的html中我有

  <button class="btn btn-primary" #myRef>Select File</button>

在父母的课程中：

export class ParentComponent implements OnInit {
  @ViewChild('myRef') myRef: ElementRef;
  // ...

但当然，当我尝试访问父类中的子ElementRef时......

ngAfterViewInit() {
  console.log(this.myRef.nativeElement);

......我得到undefined。我该如何获得ElementRef？谢谢！

Answer 1

尝试使用ContentChild而不是ViewChild

import { Component, ContentChild, ElementRef, OnInit } from '@angular/core';
...

export class ParentComponent implements OnInit {
  @ContentChild('myRef') myRef: ElementRef;
  // ...

  ngAfterViewInit() {
    console.log(this.myRef.nativeElement);
  }

}

Answer 2

您现在可以执行此操作。

@ViewChild('myRef', {read: ElementRef}) myRef: ElementRef

默认情况下，如果将模板引用变量附加到自定义组件，Angular将获取组件引用。 read选项告诉angular提取哪个标记，因此您可以明确地告诉它提取ElementRef标记，而不是尝试读取的任何组件的类实例。

Angular2：从父级获取子组件的elementref

2 个答案: