Question

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

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

该应用程序工作得很好。我应该忽略控制台错误吗？这是一个可能在以后的版本中修复的错误。也许在没有收到控制台错误的情况下，我可以做更好/更正确的方法吗？

这是应用程序组件：

应用程序/ app.component.ts

child.header

这是儿童组成部分：

应用程序/ child.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 / main.ts只是引导应用程序：

import {Component} from "angular2/core";

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

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

的index.html

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

bootstrap(AppComponent);

这里是plunk。

Answer 1

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

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

无论如何，AppComponent的代码看起来很奇怪。你觉得这个怎么样？ <child>只应在显示时显示？

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

1 个答案: