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數組和聲明數組中都應僅定義主要組件。