Question

问题

TypeError：无法读取未定义的属性'nativeElement'

component1

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

我需要触发组件1中的点击功能reloadContent。
如何使用#formkeyRefId
我可以访问同一组件中的elementref，但不能访问另一个组件。
任何建议都是最欢迎的。

Answer 1

您的点击事件似乎缺少右引号。

更改：

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

收件人：

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

Answer 2

我认为函数是在生命周期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();
        }



}

TypeError：无法读取未定义的Angular 8的属性'nativeElement'

2 个答案: