Question

我的角度应用程序版本从角度7 升级到角度8 之后我遇到了像这样的行的并发症问题

export class followupComponent implements OnInit {
    @ViewChild('message') messageElement: ElementRef;

    constructor(){}
    ...
}

我了解到新定义需要static参数并更改代码

@ViewChild('message', { static: true })) messageElement: ElementRef;

我认为问题已经解决。

但是不，我接受运行时错误：

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

与此代码有关

HTML：

<div class="message">
    <div class="action-buttons">
        <img src="{{imgPath + '_Edit_Hover.png'}}" (click)="OnEdit(Followup)">
    </div>
    <textarea matInput #message [ngModel]="Followup.Message"></textarea>
</div>

TS：

OnEdit(followup: Followup) {
    setTimeout(() => this.messageElement.nativeElement.focus());
}

角度8中ElementRef的正确定义是什么

或-如何解决此问题？

Answer 1

<textarea matInput #message [ngModel]="Followup.Message"></textarea>这一段代码可能需要显示一些逻辑（例如父节点上的*ngIf或*ngFor或一些异步代码），这意味着需要一个变更检测周期使其显示出来。

根据Angular 8 docs

static-更改前是否解析查询结果检测运行（即仅返回静态结果）。如果这个选项是如果未提供，则编译器将恢复其默认行为，使用查询结果确定查询时间解析度。如果查询结果在嵌套视图内（例如 * ngIf），将在运行更改检测后解决查询。否则，将在运行更改检测之前解决该问题。

因此您应该将static设置为false

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

这是一个简单的演示https://stackblitz.com/edit/angular-qgwhcv

在上面的演示中，输入框在3秒钟后显示。如果您设置了static:false并在显示输入后单击“编辑”，则会成功使输入聚焦。但是如果更改static:true并在显示输入后单击“编辑”，则会在控制台中看到错误。

Answer 2

我遇到了同样的问题，因为为像这样的mat-option元素创建了ElementRef类型的ChildView

模板

<mat-select (selectionChange)="handleMetaSignalChange();">
<mat-option #metaSignalOption *ngFor="let metaSignal of metaSignals" [value]="metaSignal">
                                {{ metaSignal.name }}
</mat-option>
</mat-select>

代码

 @ViewChild("metaSignalOption", { static: false }) selectedMetaSignal : ElementRef;

 handleMetaSignalChange() {
   console.log('Meta Signal Changed to ' + this.selectedMetaSignal.nativeElement.value);
 }

我用MatOption代替了ElementRef解决了这个问题，因为ElementRef仅根据official docs适用于本机DOM元素。

更新代码

  @ViewChild("metaSignalOption", { static: false }) selectedMetaSignal : MatOption;

  handleMetaSignalChange() {
   // Now selectedMetaSignal is a MatOption, not a native Element
    console.log('Meta Signal Changed to ' + this.selectedMetaSignal.viewValue);
  }

无法读取未定义的Angular 8的属性“本机元素”

2 个答案: