javascript - 通过输入将数据获取到组件

Question

如何将数据从一个页面获取到另一页面，但我刚接触 Angular 时显示错误

类型错误:无法读取 MediaItemComponent 中 [{{ mediaItem.id}} 中未定义的属性“id”

如何获取数据

第一个.html

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

第一个.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
    };
}

秒.html

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

秒.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

第一个.html

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