Angular 8 @ViewChild перевод - PullRequest
       3

Angular 8 @ViewChild перевод

1 голос
/ 08 июля 2019

У меня есть код, который работает на угловых 7, но не на угловых 8.

В основном это так:

@ViewChild(ChildComponent) child;

Как я могу заставить этот код работать на Angular 8, поскольку я знаю, чтобыл изменен.

Что я должен сделать с кодом выше?

Вот полный код:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from "../child/child.component";

@Component({
  selector: 'app-parent',
  template: `
    Message: {{ message }}
    <app-child></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements AfterViewInit {

  @ViewChild(ChildComponent) child;

  constructor() { }

  message:string;

  ngAfterViewInit() {
    this.message = this.child.message
  }
}

1 Ответ

3 голосов
/ 08 июля 2019

I цитата следующее от здесь

Причина, по которой ваш пример не работает, заключается в том, что вы пытаетесь получить доступ к результатам запроса ViewChild до завершения инициализации представления. Вот почему ваш код должен быть помещен в хук ngAfterViewInit (после начальных элементов просмотра), а не в хук ngOnInit (перед начальными элементами просмотра).

В Ivy мы сделали согласование синхронизации таким образом, чтобы запросы ViewChild и ViewChildren по умолчанию разрешались после начальных элементов представления, а не в зависимости от расположения результатов в шаблоне. Немного проще рассуждать, хотя это означает, что по умолчанию вы не найдете результаты запроса вида в ngOnInit. Если вам нужны результаты запроса в этом хуке, вы можете явно указать, что запрос будет помечен как «статический»

Таким образом, для вашего случая использования вы можете пометить запрос как статический (как это сделала бы схема V8):

@ViewChild('test', {static: true}) test: ElementRef;

... или переместите логику в ngAfterViewInit (предпочтительно).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...