ElementRef 未定义

Question

我在 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>

感兴趣的文本区域是#knowledgeTextarea。

页面组件如下：

@Component({
  selector: 'app-knowledge',
  templateUrl: './knowledge.component.html',
  styleUrls: ['./knowledge.component.scss']
})
export class KnowledgeComponent implements OnInit {

  private _mode : string;
  private _loading : boolean;
  private _knowledgeId : string;
  private _knowledgeText : string;
  private _description : string;
  private _groupPK : string;

  @ViewChild('knowledgeTextarea') knowledgeTextarea : ElementRef;

  constructor(private _activatedRoute : ActivatedRoute,
    private _watermelonService : WatermelonService,
    private _logService : LoggingService,
    private _dialog: MatDialog) {
      this._loading = true;
    }

  ngOnInit() {
…
    this.knowledgeTextarea.nativeElement.focus();
…
  }
…
}

当我运行这样做时，出现以下错误：

Cannot read property ‘nativeElement’ of undefined.

我了解到，当您在 *ngIf 块中使用 # 标识 (#knowledgeTextarea) 引用页面上的元素时，就会发生这种情况。所以这个…

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

…将不起作用。

但是还有什么选择呢？

我试过了……

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

…这有效，但后来我得到了一个 ExpressionChangedAfterItHasBeenCheckedError，JB Nizet 告诉我不要在这里这样做：Getting ExpressionChangedAfterItHasBeenCheckedError error。

如果有其他方法，请告诉我。我想要的只是能够在页面加载时为 textarea 提供焦点。任何实现这一目标的方式将不胜感激。谢谢。

Answer 1

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

 @ViewChild('knowledgeTextarea') knowledgeTextarea: ElementRef;

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

工作示例在这里 - https://stackblitz.com/edit/angular-jjyfwf

ElementRef 未定义

ElementRef is undefined

focus

angular-ng-if

angular

elementref