无法获取子DOM元素 [英] Unable to get hold of child DOM element

问题描述

注意：由于问题有点复杂，为了便于阅读，抽象代码

我们'a a < parent-component> 像这样：

 < ;儿童成分>< /儿童成分> 
< button（click）=doSomeClick（）>做一些点击< /按钮> 
  

模板 c>< child-component> is：

 < textarea #childComponentElement＃someField = ngModelname =someName[（ngModel）] =someModel>< / textarea> 
  

我们试图访问 parent- component.component.ts 像这样：

  export class ParentComponent implements AfterViewInit {
 @ ViewChild（'childComponentElement'）el：ElementRef; 
 
 ngAfterViewInit（）{
 console.log（this.el.nativeElement.value）; 
 
 doSomeClick（）{
 $ b} 
} 
  

然而它会抛出这个错误：

无法读取未定义的属性'nativeElement'

到目前为止我们已经尝试过： ： < parent-component> < child-component>

它不是关于 angular-tree-component

指令名称为camelCased

ElementRef 似乎是一件古老的事 li>

This thr ows 无法读取属性undefined

this.element.nativeElement & < input> 元素正在建立？

没有* ngIf或* ngSwitchCase

没有 * ngIf 用于 #childComponentElement

该调用位于 ngAfterViewInit only

超时是一种非常肮脏的方法

解决方案

使用嵌套组件无法简单实现此目的，您必须创建一个 EventEmitter 会发出您试图访问的元素的 ElementRef ：

child.component.ts

 类ChildComponent实现AfterViewInit {
 
 @产量（）
 templateLoaded：EventEmitter< ElementRef> = new EventEmitter（）
 
 @ViewChild（'childComponentElement'）el：ElementRef 
 
 ngAfterViewInit（）：void {
 this.templateLoaded.emit（this.el ）
} 
} 
  

parent.component.html em>

 < child-component（templateLoaded）=templateLoaded（$ event）
  

parent.component.ts

  class ParentComponent {
 
 templateLoaded（template：ElementRef）：void {
 //用`template`做一些事情
} 
} 
  

原始答案

尝试在 ViewChild

$ b的第二个参数中使用读取 $ b

  @ViewChild（'childComponentElement'，{read：ElementRef}）el：ElementRef 
  

如果你想知道第二个参数，这个答案给出了一个非常好的解释：什么是@ViewChild中的读取参数

Note: since the problem is a little complex, the code is abstracted for readability

We've a <parent-component> like this:

<child-component></child-component>
<button (click)="doSomeClick()"> Do Some Click </button>

The template of the <child-component> is:

<textarea #childComponentElement #someField="ngModel" name="someName" [(ngModel)]="someModel"></textarea>

We're trying to access the value of this element inside the parent-component.component.ts like this:

export class ParentComponent implements AfterViewInit {
    @ViewChild('childComponentElement') el:ElementRef;

    ngAfterViewInit() {
        console.log(this.el.nativeElement.value);
    }
    doSomeClick(){

    }
}

However it throws this error:

Cannot read property 'nativeElement' of undefined

What have we tried so far:

• This gives access to <parent-component>, we need <textarea> of <child-component>
• It's not about angular-tree-component
• The directive name is camelCased
• ElementRef seems to be an old thing
• This throws Cannot read property 'nativeElement' of undefined
• How is the reference between this.element.nativeElement & <input> element is getting established?
• There is no *ngIf or *ngSwitchCase
• There is no *ngIf used with #childComponentElement
• The call is inside ngAfterViewInit only
• Time out is a very dirty approach

解决方案

There's no easy way to this with a nested component, you'll have to create an EventEmitter that emits the ElementRef of the element you are trying to get access to:

child.component.ts

class ChildComponent implements AfterViewInit {

    @Output()
    templateLoaded: EventEmitter<ElementRef> = new EventEmitter()

    @ViewChild('childComponentElement') el: ElementRef

    ngAfterViewInit(): void {
        this.templateLoaded.emit(this.el)
    }
}

parent.component.html

<child-component (templateLoaded)="templateLoaded($event)"

parent.component.ts

class ParentComponent {

    templateLoaded(template: ElementRef): void {
        // do stuff with the `template`
    }
}

Original Answer

Try using the read property in the 2nd parameter of ViewChild

@ViewChild('childComponentElement', {read: ElementRef}) el: ElementRef

If you are wondering about the second parameter, this answer gives a very good explanation: What is the read parameter in @ViewChild for

这篇关于无法获取子DOM元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！