Javascript 使用输入将数据获取到组件

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

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

如何获取数据

first.html

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

secound.html

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

first.html

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

first.html

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

---

文档中说，你应该避免像以前那样重命名@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('mediaItemToWatch') mediaItem;
}

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
}

---

文档中说你应该避免像以前那样重命名@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('mediaItemToWatch') mediaItem;
}

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
}