Angularアプリで@HostBinding、@HostListener、および@Inputが機能しないのはなぜですか？

Question

@HostBinding、@HostListener、および@Inputの組み込みに問題があります。画像エリアの上にマウスを置いてホバリングすると、画像間を交換することになっています。それはうまくいくはずだが、そうではないようだ。どんな助けもありがとうございます。

これは、無料で高い評価を受けている本の「Angular 4：From Theory to Practice」から抜粋したものです。 「カスタムディレクティブ」の章の「章の終わり」のアクティビティです。

は、ここで私が問題の際、現在のよどこのための私のplunkerリンクです：http://plnkr.co/edit/MO2m8F4A3PLIIzMIbMD5?p=preview

、ここでは、コードはここにもある：

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; 
import { 
    Component, 
    Directive, 
    Renderer, 
    HostListener, 
    HostBinding, 
    ElementRef, 
    NgModule, 
    Input, 
    Output, 
    EventEmitter 
} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 


@Directive({ 
    selector: "[ccRollover]" 
}) 
class RolloverImageDirective { 
    constructor(private el: ElementRef, private renderer: Renderer){ 

    } 
    @HostBinding('src') private image: string; 

    @Input('ccRollover') images: Object = { 
    initial: 'https://unsplash.it/200/300?image=201', 
    over: 'https://unsplash.it/200/300?image=202' 
    }; 
    @HostListener('mouseover') onMouseOver() { 
    this.image = this.images.over; 
    } 
    @HostListener('mouseout') onMouseOut(){ 
    this.image = this.images.initial; 
    } 
    //TODO: Flesh out this directive 
    //TODO: HINT - Use ngOnChanges() 
} 

@Component({ 
    selector: 'app', 
    template: ` 
<img ccRollover[images]="{ 
    initial:'https://unsplash.it/200/300?image=201', 
    over:'https://unsplash.it/200/300?image=202' 
}"/> 
` 
}) 
class AppComponent { 
} 

@NgModule({ 
    imports: [BrowserModule], 
    declarations: [ 
    AppComponent, 
    RolloverImageDirective 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

Answer 1

は

@Input('images') images: Object = {..} //<--images, not ccRollover 

です

<img ccRollover [images]="{..} //<--see the "space" between ccRollover and [images]