如何创建对象作为服务成员?

时间:2015-11-01 16:33:42

标签: angular service dependency-injection

我尝试从我的主模板(app.tpl)访问服务(appDriverService)提供的成员对象(appDriver)的属性。 问题...:在我的appDriverService实例化期间,AppDriver构造函数的返回是未定义的:/

以下是我的所有文件,如果有人可以帮助我的话。

appDriver.ts

export class AppDriver {
    public path: string;
    public content: string;

    constructor (){
        this.path = '';
        this.content = '';
    }
}

appDriverService.ts

import {AppDriver} from 'app/appdriver.ts';

export class AppDriverService {

    public appDriver : AppDriver;

    constructor(){
        this appDriver = new AppDriver();
        console.log(this.appDriver);
        // here is the problem
        // this.appDriver = undefined ??????
    }

    public getAppDriver(): AppDriver {
        return this.appDriver;
    }

}

app.ts

import {Component, View, bootstrap, FORM_DIRECTIVES} from 'angular2/angular2';
import {AppDriverService} from 'app/services/appdriver-service.ts';
import {AppDriver} from 'app/appdriver.ts';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.tpl',
    directives: [FORM_DIRECTIVES]
})
class MyAppComponent {
    appDriver: AppDriver;

    constructor(appDriverService : AppDriverService) {
        this.appDriver = appDriverService.getAppDriver();
    }

    onChange ($event : Event) {
        var file = $event.target.files[0];

        this.appDriver.path = file.name;

        var reader = new FileReader();
        reader.onload = function(e){
            this.appDriver.content = e.target.result;
        }.bind(this);
        reader.readAsText(file);
    }
}

bootstrap(MyAppComponent, [AppDriverService]);

app.tpl

<input type="file" (change)="onChange($event)">

<p>{{appDriver.path}}</p>

<textarea>{{appDriver.content}}</textarea>

0 个答案:

没有答案