Angular ElementRef未定义

我在一个angular 6应用程序中工作。我有一个文本区域，我想在页面加载后立即关注它。我不能这样做

以下是页面的外观：

<div fxLayoutAlign="begin">
  <button mat-button color="primary" [routerLink]="['/Administration']">
    <i class="far fa-arrow-alt-circle-left"></i> Back to Administration
  </button>
</div>
    <div class="app-loading" *ngIf="_loading">
      <mat-spinner diameter=100></mat-spinner>
    </div>
    <div *ngIf="!_loading">

    <div class="knowledgeBody">

      <div *ngIf="_mode === 'view'">
        {{ _knowledgeText }}
        <div fxLayoutAlign="end">
          <button mat-button (click)="edit_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}">
            <i class="fas fa-edit"></i> Edit
          </button>
        </div>
      </div>

      <div *ngIf="_mode !== 'view'">
        <textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>
          {{ _knowledgeText }}
        </textarea>

        <div fxLayoutAlign="end">
          <button mat-button (click)="save_clicked()" disabled="{{ _knowledgeText.trim().length === 0 }}">
            <i class="fas fa-save"></i> Save
          </button>
        </div>
      </div>

  </div>

</div>

当我运行此操作时，会出现以下错误：

Cannot read property ‘nativeElement’ of undefined.

我已经读到，当您在*ngIf块中使用#identification（#knowledgeTextarea）引用页面上的元素时，可能会发生这种情况。所以这个

  <div *ngIf="_mode !== 'view'">
    <textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>
      {{ _knowledgeText }}
    </textarea>
</div>

{{{u knowledgeText}}

…行不通

但是，还有什么选择呢

我试过这个

  <div *ngIf="_mode !== 'view'">
    <textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>
      {{ _knowledgeText }}
    </textarea>
    {{ knowledgeTextarea.focus() }}
</div>

{{{u knowledgeText}}
{{knowledgeTextarea.focus（）}

…这很有效，但后来我得到了一个表达式ChangedTerithasBeenCheckedError，JB Nizet告诉我不要在这里这么做：

---

如果有其他方法，请告诉我。我所希望的就是能够在页面加载时提供textarea焦点。如果能以任何方式实现这一点，我们将不胜感激。谢谢。

问题是在元素呈现之前访问它。您必须确保内容在使用前已呈现。因此，与其在

ngOnInit

中访问它，不如在

ngAfterViewInit

中访问它

 @ViewChild('knowledgeTextarea') knowledgeTextarea: ElementRef;

  ngAfterViewInit() {
    this.knowledgeTextarea.nativeElement.focus();
  }

工作样本在这里-

的答案可能会对您有所帮助。

 @ViewChild('knowledgeTextarea') knowledgeTextarea: ElementRef;

  ngAfterViewInit() {
    this.knowledgeTextarea.nativeElement.focus();
  }