ElementRef 未定义
[英] ElementRef is undefined
本文介绍了ElementRef 未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理一个 angular 6 应用程序.我有一个 textarea，我想在页面加载后立即将焦点放在上面.我做不到.
页面如下:
<button mat-button color="primary" [routerLink]="['/Administration']"><i class="far fa-arrow-alt-circle-left"></i>返回管理
<div class="app-loading" *ngIf="_loading"><垫子旋转器直径=100></垫子旋转器>
<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>编辑
<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>节省
感兴趣的文本区域是#knowledgeTextarea.
这是页面的组件:
@Component({选择器:应用知识"，templateUrl: './knowledge.component.html',styleUrls: ['./knowledge.component.scss']})导出类 KnowledgeComponent 实现 OnInit {私有 _mode : 字符串；私人 _loading :布尔值；私人 _knowledgeId :字符串；私人 _knowledgeText :字符串；私人 _description : 字符串；私人 _groupPK :字符串；@ViewChild('knowledgeTextarea')knowledgeTextarea : ElementRef;构造函数(私有 _activatedRoute :ActivatedRoute，私人 _watermelonService :西瓜服务，私人 _logService :日志服务，私人 _dialog: MatDialog) {this._loading = true;}ngOnInit() {…this.knowledgeTextarea.nativeElement.focus();…}…}
当我运行这个时，我收到以下错误:
无法读取未定义的属性nativeElement".
我了解到，当您在 *ngIf 块中使用 # 标识 (#knowledgeTextarea) 引用页面上的元素时，可能会发生这种情况.所以这个……
<textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>{{ _knowledgeText }}</textarea>
...不会起作用.
那么有什么选择呢?
我试过了……
<textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>{{ _knowledgeText }}</textarea>{{knowledgeTextarea.focus() }}
…它起作用了，但后来我得到了一个 ExpressionChangedAfterItHasBeenCheckedError，JB Nizet 告诉我不要在这里做:Getting ExpressionChangedAfterItHasBeenCheckedError 错误.
如果有其他方法可以做到这一点，请告诉我.我想要的只是在页面加载时能够给 textarea 焦点.任何实现这一点的方式都将不胜感激.谢谢.
解决方案
问题是在元素呈现之前访问它.您必须确保在使用内容之前呈现内容.因此，与其在 ngOnInit 中访问它，不如在 ngAfterViewInit 中访问它.
@ViewChild('knowledgeTextarea')knowledgeTextarea: ElementRef;ngAfterViewInit() {this.knowledgeTextarea.nativeElement.focus();}
工作示例在这里 - https://stackblitz.com/edit/angular-jjyfwf
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.
Here is what the page looks like:
<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>
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.
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>
…will not work.
But then what is the alternative?
I tried this…
<div *ngIf="_mode !== 'view'">
<textarea matInput [(ngModel)]="_knowledgeText" cdkTextareaAutosize #knowledgeTextarea>
{{ _knowledgeText }}
</textarea>
{{ knowledgeTextarea.focus() }}
</div>
…which worked but then I got a ExpressionChangedAfterItHasBeenCheckedError, which JB Nizet told me not to do here: Getting ExpressionChangedAfterItHasBeenCheckedError error.
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.
解决方案
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();
}
Working sample is here - https://stackblitz.com/edit/angular-jjyfwf
这篇关于ElementRef 未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
