类型错误：无法读取未定义的 Angular 8 的属性“nativeElement”

Question

问题类型错误：无法读取未定义的属性“nativeElement”组件 1<div id="formkeyRefId" #formkeyRefId (click)="test.reloadContent(data.value)> </div><ng-container>    <app-component2  #test [data]="data.value" ></app-component2></ng-container></div>           export class Component1 implements OnInit, AfterViewInit {            @ViewChild('formkeyRefId', { static: false }) formkeyRefId: ElementRef;            constructor() { }            ngOnInit() { }            ngAfterViewInit() {                console.log(this.formkeyRefId.nativeElement);                this.formkeyRefId.nativeElement.click();                setTimeout(() => {                    console.log(this.formkeyRefId.nativeElement.id);                    this.formkeyRefId.nativeElement.click();                  }, 5000);            }组件 2 app-component2import { Component, Input, OnInit, Output, EventEmitter ,ElementRef, ViewChild,AfterViewInit } from '@angular/core';export class Component2 implements OnInit,AfterContentInit {    @ViewChild('formkeyRefId',{static: false}) formkeyRefId: ElementRef;    constructor(public myElement: ElementRef){}      this.afterViewInitExecuted = false;      ngAfterContentInit() {      this.afterViewInitExecuted = true;    }    formEventEmitter(event) {        if (event && this.afterViewInitExecuted) {           setTimeout(() => {              console.log(this.formkeyRefId.nativeElement);            }, 5000);             //this.formkeyRefId.nativeElement.click();            //const  el: HTMLElement = this.myDiv.nativeElement;            //e1.click();        }        reloadContent() {             getdata();        }}试图测试 id 是否存在于另一个组件中ngAfterViewInit() { this.afterViewInitExecuted = true;  console.log(this.formkeyRefId);  Output Undefined}

Answer 1

• 我需要reloadContent在组件 1 中触发点击功能。

• 如何使用 #formkeyRefId 从另一个组件访问 Id

• 我可以在同一个组件中访问 elementref，但不能在另一个组件中访问。

• 任何建议都是最受欢迎的。

Answer 2

我认为该函数是在 Lifecilycle AfterViewInit 执行之前执行的。尝试添加一个标志，表明 AfterViewInit 已经被执行。

import { Component, Input, OnInit, Output, EventEmitter ,ElementRef, ViewChild,AfterViewInit } from '@angular/core';

export class Component2 implements OnInit {

    @ViewChild('formkeyRefId',{static: false}) formkeyRefId: ElementRef;

    prívate afterViewInitExecuted = false;

    constructor(public myElement: ElementRef){}

    ngAfterViewInit() {

        this.afterViewInitExecuted = true; 

    }

    formEventEmitter(event) {

        if (event && this.afterViewInitExecuted) {

            this.formkeyRefId.nativeElement.click();

            //const  el: HTMLElement = this.myDiv.nativeElement;

            //e1.click();

        }

        reloadContent() {

            getdata();

        }

}

Answer 3

您的点击事件似乎缺少结束语。

改变：

(click)="test.reloadContent(data.value)

到：

(click)="test.reloadContent(data.value)"