ANGULAR - 类型对象上不存在属性

时间:2017-08-15 12:46:33

标签: node.js angular typescript angularjs-directive angular-cli

我一直在关注'Angular2从理论到实践'这本书,我遇到了一个自定义指令,完全适用于本书提供的 plnkr 但是当我尝试在node.js中编译它时,它会给我以下错误:

  

在'对象'类型上不存在“属于''的属性。”

Here is the plnkr: http://plnkr.co/edit/J1ovl0c6hvZE73nRS29o?p=preview

这是“我的”代码:

    **app.module.ts**


    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { RolloverImageDirective } from './rollover.directive';

    import { AppComponent } from './app.component';

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



    **app.component.ts**
    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    }



    **app.component.html**
    <img [ccRollover]="{
       'initial':'https://unsplash.it/200/300?image=201',
       'over':'https://unsplash.it/200/300?image=202'
    }" />


**rollover.directive.ts**
    import { Directive, HostBinding, HostListener, Input } from '@angular/core';

@Directive({
  selector: 'img[ccRollover]'
})
export class RolloverImageDirective {
  @Input('ccRollover') config: Object = {
    'initial': 'https://unsplash.it/200/300?image=201',
    'over': ''
  };

  @HostBinding('src') private imagePath: string;

  ngOnChanges() {
    if (this.config.initial) {
      this.imagePath = this.config.initial;
    }
  }

  @HostListener('mouseover') onMouseOver() {
    this.imagePath = this.config.over;
  }

  @HostListener('mouseout') onMouseOut() {
    this.imagePath = this.config.initial;
  }
}

我是否遗漏了ts.config文件中的内容或者node.js中的编译选项,它允许成功编译此代码?

0 个答案:

没有答案