Angular 4-将数据传递到组件

Question

我真的很困惑，我试图在Angular 4中将数据从一个组件注入到另一个组件，似乎数据通过了，但是它不会显示，我将直接转到示例代码：

board.component.ts：

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

@Component({
  selector: 'game-board',
  template: `<card [init]="name"></card>`,
})

export class BoardComponent  {
  name: string = 'this is the card name';
}

Card.component.ts：

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

    @Component({
      selector: 'card',
      template: `<div class="card-container"> 
                    CARD - {{strength}}
                 </div>`,
    })
    export class CardComponent  {
      @Input('init') strength: string;
    }

除了结果是“ CARD-这是卡名”外，我只希望它是“ CARD-”。

元素的外观如下（Chrome开发者工具，忽略'CARD-'和''之间的间隙）：

因此，我看到注入成功并且通过了"this is the card name" ，但是由于某种原因， strength没有定义。

我究竟做错了什么？

Answer 1

确保主要组件在ngModule定义的bootstrap属性中定义，并且两个组件都定义为声明。 应该看起来像这样：

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ BoardComponent, CardComponent ],
  bootstrap:    [ BoardComponent ]
})

在bootstrap数组和声明数组中都应仅定义主要组件。