TypeError：无法使用@ViewChild 读取未定义的属性“nativeElement”？答案

【问题标题】：TypeError: Cannot read property 'nativeElement' of undefined with @ViewChild?TypeError：无法使用@ViewChild 读取未定义的属性“nativeElement”？
【发布时间】：2021-02-10 21:00:22
【问题描述】：

我正在Angular-7 上开发项目，并使用如何使用@ViewChild 直接从 TypeScript 文件中访问您的元素。但我得到了错误。在我看来 @ViewChild('serverContentInput', { read: true, static: true }) serverContentInput: ElementRef; 无法使用 @ViewChild 访问模板和 DOM

错误：

ERROR TypeError: Cannot read property 'nativeElement' of undefined
    at CockpitComponent.onAddServer (cockpit.component.ts:24)
    at Object.eval [as handleEvent] (CockpitComponent.html:11)
    at handleEvent (core.js:34777)
    at callWithDebugContext (core.js:36395)
    at Object.debugHandleEvent [as handleEvent] (core.js:36031)
    at dispatchEvent (core.js:22519)
    at core.js:33709
    at HTMLButtonElement.<anonymous> (platform-browser.js:1789)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30873)

cockpit.component.ts

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

@Component({
  selector: 'app-cockpit',
  templateUrl: './cockpit.component.html',
  styleUrls: ['./cockpit.component.css']
})
export class CockpitComponent implements OnInit {
  @Output() serverCreated = new EventEmitter<{ serverName: string, serverContent: string }>();
  @Output('bpCreated') blueprintCreated = new EventEmitter<{ serverName: string, serverContent: string }>();

  // newServerName = '';
  // newServerContent = '';
  @ViewChild('serverContentInput', { read: true, static: false }) serverContentInput: ElementRef;

  constructor() { }

  ngOnInit() {
  }

  onAddServer(nameInput: HTMLInputElement) {
    this.serverCreated.emit({
      serverName: nameInput.value,
      serverContent: this.serverContentInput.nativeElement.value
    });
  }

  onAddBlueprint(nameInput: HTMLInputElement) {
    this.blueprintCreated.emit({
      serverName: nameInput.value,
      serverContent: this.serverContentInput.nativeElement.value
    });
  }
}

cockpit.component.html

<div class="row">
  <div class="col-xs-12">
    <p>Add new servers or blueprint !</p>
    <label>Server Name</label>
    <!-- <input type="text" class="form-control" [(ngModel)]="newServerName" /> -->
    <input type="text" class="form-control" #serverNameInput />  <!-- Local Reference -->
    <label>Server Content</label>
    <!-- <input type="text" class="form-control" [(ngModel)]="newServerContent" /> -->
    <input type="text" class="form-control" #serverContentInput  />
    <br>
    <button class="btn btn-primary" (click)="onAddServer(serverNameInput)">Add Server</button>
    <button class="btn btn-primary" (click)="onAddBlueprint(serverNameInput)">Add Server Blueprint</button>
  </div>
</div>

【问题讨论】：

标签： javascript angular7

【解决方案1】：

read 属性告诉 Angular 要读取什么。可以省略读取默认值。

所以在你的情况下，任何一个都应该工作：

@ViewChild('serverContentInput', { read: ElementRef, static: false })
@ViewChild('serverContentInput', { static: false })

【讨论】：