Я работаю в приложении 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.
Я читал, что это может произойти, когда вы ссылаетесь на элемент на странице, используя идентификатор # (#knowledgeTextarea) внутри блока *ngIf. Итак, это…
<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, которую Дж. Б. Низет посоветовал мне не делать здесь: >.
Если есть другой способ сделать это, пожалуйста, дайте мне знать. Все, что я хочу, это иметь возможность фокусировать текстовое поле при загрузке страницы. Любой способ достижения этого будет принят с благодарностью. Спасибо.