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>

Интересующее текстовое поле - #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, который JB Низет сказал мне не делать здесь: Получение ошибки ExpressionChangedAfterItHasBeenCheckedError.

Если есть другой способ сделать это, дайте мне знать. Все, что я хочу, - это иметь возможность фокусировать текстовое поле при загрузке страницы. Любой способ достижения этого был бы очень признателен. Спасибо.