javascript - Angular 4 - 将数据传递到组件中

Question

我真的很困惑，我试图在Angular 4中从一个组件向另一个组件注入(inject)数据，好像数据通过了但不会显示，我会直接示例代码:

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 -”和“”之间的差距):

所以我看到注入(inject)有效，“这是卡片名称” 通过了，但由于某种原因 strength 未定义。

我做错了什么？

Answer 1

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

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

只有主要组件应该在 Bootstrap 数组中定义，并且都在声明数组中定义。