通过输入获取数据到组件

Question

如何从一个页面获取数据到另一个页面，但它显示错误我是新手 angular

TypeError: 无法读取 MediaItemComponent

中 [{{ mediaItem.id}} 中未定义的属性 'id'

如何获取数据

first.html

<section>
    <media-item [mediaItem]="firstMediaItem"></media-item>
</section>

first.ts

import {Component} from 'angular2/core';
import {MediaItemComponent} from './secound';

@Component({
    selector: 'media-tracker-app',
    directives: [MediaItemComponent],
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css']
})
export class AppComponent {
    firstMediaItem = {
        id: 1,
        name: "Firebug",
        medium: "Series",
        category: "Science Fiction",
        year: 2010,
        watchedOn: 1294166565384,
        isFavorite: false
    };
}

secound.html

<h2>{{ mediaItem.id }}</h2>
<div>Watched on {{ mediaItem.watchedOn }}</div>
<div>{{ mediaItem.category }}</div>
<div>{{ mediaItem.year }}</div>

secound.ts

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'media-item',
    templateUrl: 'app/media-item.component.html',
    styleUrls: ['app/media-item.component.css']
})
export class MediaItemComponent {
    @Input('mediaItemToWatch') mediaItem;
}

Answer 1

first.html

<section>
    <media-item [mediaItemToWatch]="firstMediaItem"></media-item>
</section>

Answer 2

DOCS 说您应该避免像您那样重命名@Input()。这就是造成此类问题的原因。

要修复您的组件行为，只需将@Input 声明更改为：

secound.ts

import {Component, Input} from 'angular2/core';

@Component({
    selector: 'media-item',
    templateUrl: 'app/media-item.component.html',
    styleUrls: ['app/media-item.component.css']
})
export class MediaItemComponent {
    @Input() mediaItem; //HERE, do not rename the input
}

通过输入获取数据到组件

Getting data to the component with input

javascript

angular2-directives

angular