我真的很困惑,我试图在 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;):
所以我看到注入工作且"this is the card name"
已通过,但由于某种原因,strength
未定义。
我做错了什么?
答案 0 :(得分:3)
确保在ngModule定义的bootstrap属性中定义了主要组件,并且两个组件都定义为声明。 应该看起来像这样:
@NgModule({
imports: [ BrowserModule ],
declarations: [ BoardComponent, CardComponent ],
bootstrap: [ BoardComponent ]
})
只应在引导程序数组中定义主要组件,并且两者都应在声明数组中定义。