angular-cli：数据绑定时出错<> @Input属性为空

Question

我已经阅读过每一个关于此的论坛，但仍然无法使其工作。 我有1个父组件，并且想要加载几个子组件（为每个组件传递不同的输入参数）。

我的应用程序是安装方式如下：

• 我app.component将有3子组件：标题，内容（我还没有尚未实现）&页脚;
• 还有另一个组件需要在我的Header组件中重复，所以我创建了一个Child组件（仅在Header组件中使用）;

下面全是我CODE：

---

app.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http'; 

import { AppComponent } from './app.component'; 
import { HeaderComponent } from './header/header.component'; 
import { FooterComponent } from './footer/footer.component'; 
import { ChildComponent } from './child/child.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent, 
    ChildComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpModule 
    ], 
    providers: [ 

    ], 
    bootstrap: [ 
    AppComponent, 
    HeaderComponent, 
    FooterComponent, 
    ChildComponent 
    ] 
}) 

export class AppModule { } 

---

app.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <header class="container-fluid"> 
    <app-header></app-header> 
    </header> 

    <content class="container-fluid"> 
    </content> 

    <footer class="container-fluid"> 
    <app-footer></app-footer> 
    </footer>` 
}) 

export class AppComponent { } 

---

header.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-header', 
    template: ` 
    <div> 
    <h2>HEADER</h2> 
    <app-child [code]="'1st value'"></app-child><br> 
    <app-child [code]="'2nd value'"></app-child><br> 
    <app-child [code]="'3rd value'"></app-child> 
    </div>` 
}) 

export class HeaderComponent { } 

---

footer.component.ts

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-footer', 
    template: `<div><h2>FOOTER</h2></div>` 
}) 

export class FooterComponent { } 

---

child.component.ts

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'app-child', 
    template: `<div>Hello World! {{this.code}}</div>` 
}) 

export class ChildComponent { 
    @Input() code: string; 
} 

---

但由于某些原因，绑定不第一个孩子组件工作。输出是：

Hello World! 
Hello World! 2nd value 
Hello World! 3rd value 

使事情更混乱，如果我删除我的页脚部分，这个工程......但页脚组件不以任何方式与我的头组件或它子组件。

有人可以帮我弄清楚为什么这只是第一次出现失败，但对其他绑定工作正常吗？

角属性：

_      _     ____ _  ___ 
/\ _ __ __ _ _ _| | __ _ _ __ /___| | |_ _| 
/△ \ | '_ \/_` | | | | |/ _` | '__| | | | | | | 
/___ \| | | | (_| | |_| | | (_| | |  | |___| |___ | | 
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_|  \____|_____|___| 
       |___/ 
@angular/cli: 1.2.1 
node: 6.10.0 
os: win32 x64 
@angular/animations: 4.2.6 
@angular/common: 4.2.6 
@angular/compiler: 4.2.6 
@angular/compiler-cli: 4.2.6 
@angular/core: 4.2.6 
@angular/forms: 4.2.6 
@angular/http: 4.2.6 
@angular/platform-browser: 4.2.6 
@angular/platform-browser-dynamic: 4.2.6 
@angular/platform-server: 4.2.6 
@angular/router: 4.2.6 
@angular/cli: 1.2.1 
@angular/language-service: 4.2.6 

预先感谢任何帮助。

Answer 1

我复制了您的代码，但无法重现您指定的错误。你能否检查一下你是否有其他遗漏。