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

时间:2017-03-28 05:47:19

标签: javascript angularjs angular4

我真的很困惑,我试图在 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;
    }

我会将结果除外&#34; CARD - 这是卡片名称&#34; 但它只是&#34; CARD - &#34;。

以下是元素的外观(chrome dev工具,忽略了CARD之间的差距 - &#39;&#39;&#39;):

enter image description here

所以我看到注入工作且"this is the card name"已通过,但由于某种原因,strength未定义。

我做错了什么?

1 个答案:

答案 0 :(得分:3)

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

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

只应在引导程序数组中定义主要组件,并且两者都应在声明数组中定义。