类型错误：无法读取未定义的 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-component2

import { 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 {&nbsp; &nbsp; @ViewChild('formkeyRefId',{static: false}) formkeyRefId: ElementRef;&nbsp; &nbsp; prívate afterViewInitExecuted = false;&nbsp; &nbsp; constructor(public myElement: ElementRef){}&nbsp; &nbsp; ngAfterViewInit() {&nbsp; &nbsp; &nbsp; &nbsp; this.afterViewInitExecuted = true;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; formEventEmitter(event) {&nbsp; &nbsp; &nbsp; &nbsp; if (event && this.afterViewInitExecuted) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.formkeyRefId.nativeElement.click();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //const&nbsp; el: HTMLElement = this.myDiv.nativeElement;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //e1.click();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; reloadContent() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; getdata();&nbsp; &nbsp; &nbsp; &nbsp; }}

Answer 3

您的点击事件似乎缺少结束语。改变：(click)="test.reloadContent(data.value)到：(click)="test.reloadContent(data.value)"