Angular 8 @ViewChild 翻译

Question

我有一些代码适用于 angular 7 但不适用于 angular 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
  }
}

Answer 1

我引用以下来自here

您的示例不起作用的原因是您试图在视图完成初始化之前访问 ViewChild 查询的结果。这就是为什么您的代码应该放在 ngAfterViewInit 挂钩（在视图初始化之后）而不是 ngOnInit 挂钩（在视图初始化之前）。

在 Ivy 中，我们使时间一致，以便 ViewChild 和 ViewChildren 查询默认在视图初始化后解析，而不是依赖于结果在模板中的位置。这更容易推理，尽管这意味着默认情况下您不会在 ngOnInit 中找到视图查询结果。如果您需要该挂钩中的查询结果，您可以明确选择将查询标记为 "static"

因此对于您的用例，您可以将查询标记为静态（如 V8 原理图所做的那样）：

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

...或将逻辑移至 ngAfterViewInit（首选）。

Angular 8 @ViewChild 翻译

Angular 8 @ViewChild translation

angular

angular8