Angular DataService 无法解析参数答案

【问题标题】：Angular DataService cant resolve parametersAngular DataService 无法解析参数
【发布时间】：2018-05-28 07:58:18
【问题描述】：

我正在使用 Angular v.4.2.4。当我尝试从 API 获取数据时，我收到一个我似乎找不到的错误。 API 在我自己的机器上，并且在邮递员中返回数据。我得到的错误是：

Can't resolve all parameters for DataService

这是我认为有助于查找错误的文件：

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';    

import { AppComponent } from './app.component';
import { ProductComponent } from './shop/product.component';
import { DataService } from './shared/dataService';

@NgModule({
    declarations: [       
        AppComponent,
        ProductComponent
    ],
    imports: [
        BrowserModule,
        HttpClientModule
    ],
    providers: [DataService],
    bootstrap: [AppComponent]
})
export class AppModule { }

数据服务

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import { Product } from './product';

Injectable()
export class DataService {

    constructor(private http: HttpClient) { }

    public products: Product[] = [];

    loadProducts(): Observable<boolean>{
        return this.http.get('/api/products')
            .map((data: any[]) => {
                this.products = data;
                return true;
            })
    }
}

产品.组件

import { Component, OnInit } from "@angular/core";
import { DataService } from '../shared/dataService';
import { Product } from '../shared/product';  


@Component({
    selector: "product-list",
    templateUrl: "productList.component.html",
    styleUrls: []
})

export class ProductComponent implements OnInit {

    constructor(private data: DataService) { }

    public products: Product[] = [];

    ngOnInit(): void {
        this.data.loadProducts()
            .subscribe(success => {
                if (success) {
                    this.products = this.data.products;
                }
            });
    }
}

如果您还想看其他内容，请告诉我。感谢大家的帮助。

【问题讨论】：

标签： angular angular4-httpclient

【解决方案1】：

您需要在“产品”api 中提供一些数据值作为参数在您的产品组件中。

this.data.loadProducts({'url': '/api/products', 'data':{
'x': ''
}}).subscribe(success =>{
console.log(success);
})

在您的数据服务中

loadProducts(data): Observable<boolean>{
    return this.http.get(data.url, data.data)
        .map((data: any[]) => {
            this.products = data;
            return true;
        })
}

【讨论】：