角8 @ViewChild翻译

Question

我有一些在角7上工作的代码，但不是角8。

基本上是这样的：

@ViewChild(ChildComponent) child;

如何使这段代码在角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

我从这里引用以下的话

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

在常春藤中，我们使时间一致，以便ViewChild和ViewChildren查询在默认情况下在视图之后解析，而不是依赖于模板中结果的位置。虽然这意味着在默认情况下您不会在ngOnInit中找到视图查询结果，但它更容易一些。如果需要该钩子中的查询结果，则可以显式选择将查询标记为“静态”。

因此，对于用例，可以标记查询静态(正如V8原理图所做的那样)：

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

..。或者将逻辑移到ngAfterViewInit (首选)。