Question

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

我们这样<parent-component>：

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

template的{{1}}是：

<child-component>

我们正试图在<textarea #childComponentElement #someField="ngModel" name="someName" [(ngModel)]="someModel"></textarea>中尝试访问此元素的值，如下所示：

parent-component.component.ts

然而它会抛出此错误：

无法阅读属性＆＃39; nativeElement＆＃39;未定义的

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

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

原始答案

尝试使用read

的第二个参数中的ViewChild属性

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

如果您想知道第二个参数，这个答案给出了一个非常好的解释：What is the read parameter in @ViewChild for

Answer 2

使用@Output装饰器或服务，而不是无望地直接从父组件访问textarea

子模板

<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);
    }
}

无法获得子DOM元素

2 个答案: