Question

无法获取子 DOM 元素

2017-06-01

804

javascript html angular typescript

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

我们有一个这样的 <parent-component> :

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

<child-component> 的 template 是：

<textarea #childComponentElement #someField="ngModel" name="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(){

    }
}

但是它抛出了此错误：

Cannot read property 'nativeElement' of undefined

到目前为止我们尝试了什么：

Answer 1

使用嵌套组件没有简单的方法来实现这一点，您必须创建一个 EventEmitter ，它发出您尝试访问的元素的 ElementRef ：

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`
    }
}

原始答案

尝试在 ViewChild 的第二个参数中使用 read 属性

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

如果您对第二个参数感到疑惑，这个答案给出了一个很好的解释： @ViewChild 中的 read 参数是什么

Answer 2

使用 @Output 装饰器或服务，而不是绝望地尝试直接从父组件访问文本区域

子模板

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

子组件

@ViewChild('childComponentElement') el:ElementRef;
@Output() textarea = new EventEmitter();
constructor(){
this.textarea.emit(this.el.nativeElement.value);
}

父模板

<child-component (change)="getdata($event)"></child-component>

父组件

export class ParentComponent {
    getdata(e) {
        console.log(e);
    }
}