0

我正在编写一个 Angular 2 组件来测试 Http 服务,我有这个:

这是我的 app.component.ts

import {Component} from 'angular2/core';
import {HttpService} from './http.service';

@Component({
    selector: 'my-app',
    template: `
        <div>
            <div class="input">
                <label for="title">Title</label>
                <input type="text" id="title" #title>
                <p></p>
            </div>
            <div class="input">
                <label for="body">Body</label>
                <input type="text" id="body" #body>
                <p></p>
            </div>
            <div class="input">
                <label for="user-id">User ID</label>
                <input type="text" id="user-id" #userId>
                <p></p>
            </div>
            <button (click)="onPost(title.value, body.value, userId.value)">Post Data</button>
            <button (click)="onGetPosts()">Get All Posts</button>
            <p>Response: {{response | json}}</p>
        </div>
    `,
    directives: [HttpService]
})
export class AppComponent {
    response: string;
    constructor(private _httpService: HttpService) {};
    onGetPosts() {
        this._httpService.getPosts()
            .subscribe(
                response => this.response = response,
                error => console.log(error)
            )
    }
}

我相信我的错误在这个文件中。当我编译代码时,我得到了错误 例外:在 HttpService 上找不到指令注释

4

1 回答 1

1

事实证明,当我本应将 HttpService 作为提供程序包含在提供程序中时,我将 HttpService 作为指令包含在我的组件装饰器中

        <button (click)="onGetPosts()">Get All Posts</button>
        <p>Response: {{response | json}}</p>
    </div>
`,
providers: [HttpService]
})
export class AppComponent {
    response: string;
    constructor(private _httpService: HttpService) {};
    onGetPosts() {
于 2016-03-09T00:52:24.423 回答