@viewChild возвращает undefined в Angular

Question

Я уже читал другие сообщения, похожие на мои, но они не совсем связаны, поэтому я прошу указать конкретный c случай. Когда я пытаюсь взять значение child.message или print child в консоли, я получаю ошибку «child is undefined».

app.component.ts

@Component({
  selector: 'app-root',
  template: `
    <h1>Example of uses of @ViewChild with child component</h1>
    <app-child-component></app-child-component>
    <p>This is the message value of the child component selected with @ViewChild: '{{childMessage}}' </p>
  `
})

export class AppComponent implements AfterViewInit{
  
    @ViewChild(ChildComponent, { read: true }) child!: ChildComponent

    childMessage:string
    
    ngAfterViewInit(){
        console.log(this.child)
        this.childMessage = this.child.message
    }

}

child.component.ts

@Component({
  selector: 'app-child-component',
  template: `
    <div class="container">
        <h2>This is the child component!</h2>
        <p> The message value is '{{message}}'</p>
    </div>
    `,
    styles: ['.container{ background-color: rgb(154, 218, 226); border: 1px solid black; }']
})
export class ChildComponent {

    message:string = 'Ave Caesar!'

}

Я следил за официальной angular документацией, что не так? Спасибо!

Answer 1

Свойство read используется для разделения нескольких доступных инъекционных элементов (кстати, это не может быть установлено как логическое). Вам это не нужно в вашем случае использования. Он будет работать, удалив его.

Чтобы избежать ошибки expression has changed after it was checked, запустите обнаружение изменений вручную:

constructor(cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.childMessage = this.child.message;
    this.cdr.detectChanges();
  }