類型錯誤：無法讀取未定義 Angular 8 的屬性“nativeElement”

Question

問題

TypeError：無法讀取未定義的屬性“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 應用程序組件 2

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
}

• 我需要觸發單擊組件 1 中的 function reloadContent 。

• 如何使用 #formkeyRefId 從另一個組件訪問 Id

• 我可以在同一個組件中訪問 elementref，但不能在另一個組件中訪問。

• 任何建議都是最受歡迎的。

Answer 1

您的點擊事件似乎缺少結束引號。

改變：

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

至：

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

Answer 2

我認為 function 是在生命周期 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();
        }



}