为什么在 ngIf 中使用 ViewChild 会导致控制台错误？答案

【问题标题】：Why Does Using a ViewChild in ngIf Cause Console Errors?为什么在 ngIf 中使用 ViewChild 会导致控制台错误？
【发布时间】：2016-04-02 18:11:46
【问题描述】：

我收到一堆控制台错误，下面的代码显示'child in AppComponent@0:4' has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'。

问题出在app.component 中的h1 元素中。如果我取出*ngIf，控制台错误就会消失，但我会收到一个未定义的错误，因为child.header 尚未初始化。

该应用程序运行良好。我应该忽略控制台错误吗？这是一个可能会在以后的版本中修复的错误。也许有更好/正确的方法来做我想做的事情而不会收到控制台错误？

这是应用组件：

app/app.component.ts

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

@Component({
  directives: [ChildComponent],
    selector: 'my-app',
    template: `<h1 *ngIf="child">{{child.header}}</h1>
    <child></child>`
})
export class AppComponent { 
  @ViewChild(ChildComponent) child: ChildComponent;
}

这是子组件：

app/child.component.ts

import {Component} from "angular2/core";

@Component({
    selector: "child",
    template: "<p>I'm the child</p>"
})

export class ChildComponent {
    public header: string = "Child Header!!";
}

app/main.ts 只是引导应用程序：

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
    <script src="https://npmcdn.com/angular2@2.0.0-beta.13/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="https://code.angularjs.org/2.0.0-beta.13/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.9/lib/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.13/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.13/angular2.dev.js"></script>

    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'app': {defaultExtension: 'ts'}} 
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

这是plunk。

【问题讨论】：

标签： typescript angular

【解决方案1】：

Angular2 不喜欢绑定到 @ViewChild() 的结果，因为结果会通过更改检测进行更新，并且 Angular 在更改检测期间绑定更改时会产生提到的错误。在您的情况下，您不需要@ViewChile()。您可以改用模板变量

template: `<h1 *ngIf="child">{{child.header}}</h1>
<child #child></child>

无论如何，您的AppComponent 代码看起来很奇怪。你希望这如何工作？ <child> 应该只在显示的时候显示？

【讨论】：

这只是我能想出的最快的例子来说明问题。我实际上想要做的是使用子元素中的属性将一个类添加到其父元素的菜单中。 [class.active]=child.visible。模板变量有效。谢谢！