ElementRef未定义 [英] ElementRef is undefined

问题描述

我正在使用角度为6的应用程序.我想在页面加载后立即关注一个文本区域.我无法这样做.

I’m working in an angular 6 application. I have a textarea that I’d like to give focus to as soon as the page loads. I’m not able to do so.

页面外观如下:

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

The textarea of interest is #knowledgeTextarea.

以下是页面的组成部分:

Here’s the component for the page:

@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();
…
  }
…
}

运行此命令时，出现以下错误:

When I run this, I get the following error:

Cannot read property ‘nativeElement’ of undefined.

我读到，当您使用* ngIf块中的#标识(#knowledgeTextarea)引用页面上的某个元素时，可能会发生这种情况.所以这个……

I’ve read that this can happen when you reference an element on the page using the # identification (#knowledgeTextarea) inside an *ngIf block. So this…

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

...将不起作用.

但是那又有什么选择呢?

But then what is the alternative?

我尝试过这个……

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

...有效，但随后出现了ExpressionChangedAfterItHaHasBeenCheckedError，JB Nizet告诉我不要在这里执行:获取ExpressionChangedAfterItHasBeenCheckedError错误.

…which worked but then I got a ExpressionChangedAfterItHasBeenCheckedError, which JB Nizet told me not to do here: Getting ExpressionChangedAfterItHasBeenCheckedError error.

如果还有另一种方法，请告诉我.我想要的是能够在页面加载时给予textarea焦点.任何实现此目的的方式将不胜感激.谢谢.

If there is another way of doing this, please let me know. All I want is to be able to give the textarea focus when the page loads. Any way of accomplishing that would be greatly appreciated. Thanks.

推荐答案

问题是在呈现元素之前访问元素.您必须确保在使用内容之前先对其进行渲染.因此，应该在ngAfterViewInit中进行操作，而不是在ngOnInit中进行访问.

The issue is accessing the element before it was rendered. You must ensure that the content is rendered before it is being used. So instead of accessing it inside ngOnInit, you should do in ngAfterViewInit.

 @ViewChild('knowledgeTextarea') knowledgeTextarea: ElementRef;

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

工作示例在此处- https://stackblitz.com/edit/angular-jjyfwf

这篇关于ElementRef未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！