Angular2中，detail.component.ts中的代码在点击时不再出现在主应用程序中

Question

我正在尝试学习Angular2，我正在遵循https://angular.io上的教程，而我正在尝试创建一些更自定义但非常基本的东西，单击图像和更大的图像显示。我到了https://angular.io/docs/ts/latest/tutorial/toh-pt3.html，在那里我基本上设置了正确的文件结构，但我的代码，当它都在app.component.ts工作时，工作得很好，现在只有一半工作。这就是我现在在app.component.ts

中的内容

import { Component } from '@angular/core';
import { Flickr } from './flickr';
const Flickres: Flickr[] = [
    { id: 11, url: 'https://c1.staticflickr.com/9/8501/8300920648_d4a21bba59_n.jpg', urlxl: 'https://c1.staticflickr.com/9/8501/8300920648_56ce4fb10f_k.jpg' },
    { id: 12, url: 'https://c1.staticflickr.com/2/1558/26017368400_dc45fbb364_n.jpg', urlxl: 'https://c1.staticflickr.com/2/1558/26017368400_41dff31fbc_k.jpg' },
    { id: 13, url: 'https://c5.staticflickr.com/4/3781/10901734724_ab15461d13_n.jpg', urlxl: 'https://c5.staticflickr.com/4/3781/10901734724_94ed12297a_k.jpg' },
    { id: 14, url: 'https://c8.staticflickr.com/9/8486/8203155911_f29b9bf344_n.jpg', urlxl: 'https://c8.staticflickr.com/9/8486/8203155911_f29b9bf344_c.jpg' }
];
@Component({
    selector: 'my-app',
    template: `
        <h1>{{title}}</h1>
        <h2>My flickres</h2>
        <ul class="flickres" >
          <li *ngFor="let flickr of flickres" [class.selected]="flickr === selectedFlickr"
            (click)="onSelect(flickr)">
            <img src="{{flickr.url}}"/>
          </li>
        </ul>
        <my-flickr-detail [flickr]="selectedFlickr">
        </my-flickr-detail>
    `,
    styles: [`
        .flickres {
          padding: 0;
        }
        .flickres li {
          list-style:none;
          display: inline-block;
          width: 25%;
        }
        .flickres li img {
          width: 100%;
        }
        .xl {
          width: 100%;
        }
        .selected {
            opacity: 0.5;
        }
    `],
})
export class AppComponent {
    title = 'Flickr images';
    flickres = Flickres;
    selectedFlickr: Flickr;
    onSelect(flickr: Flickr): void {
        this.selectedFlickr = flickr;
        console.log(Flickr)
    }
}

这是在我的flickr-detail。component。ts

import { Component, Input } from '@angular/core';
import { Flickr } from './flickr';
@Component({
    selector: 'my-flickr-detail',
    template: `
        <div *ngIf="flickr" >
            <img class="xl" src="{{flickr.urlxl}}" />
        </div>
    `,
})
export class FlickrDetailComponent {
    @Input()
    flickr: Flickr;
}

基本上在onselect上，带有urlxl(大图)的代码不再输出到my-flickr-detail中的代码中，作为Angular的新手，我现在被困在了一个对我来说非常愚蠢的错误，我无法弄清楚。

希望这是有意义的，提前感谢任何帮助!

Answer 1

对我来说很好。Here it's a working plunker: http://plnkr.co/edit/8n8QXC2JJvAzrbBJuMjO?p=preview

对于以后的问题，像这样总是创建一个plunker的例子，所以其他人会很容易看到你的应用程序，也张贴修复。