Question

我正在构建一个Ionic项目，我正在尝试创建一个API服务来与我的服务器进行交互。我在Angular中为我的API创建了一个模块：

import { HttpClientModule } from "@angular/common/http";
import { NgModule } from "@angular/core";
import { ApiService } from "./api.service";
import { MarketItemsApi } from "./items/MarketItemsApi.service";

@NgModule({
    imports: [
        HttpClientModule
    ],
    providers: [
        ApiService,
        MarketItemsApi
    ]
})
export class ApiModule {};

使用一般RESTful端点的服务实现：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ApiService {
  url: string = 'https://www.example.com/api/v1';

  constructor(public http: HttpClient) {
  }

  get(endpoint: string) {
    return this.http.get(this.url + '/' + endpoint);
  }

  post(endpoint: string, body: any) {
    return this.http.post(this.url + '/' + endpoint, body);
  }

  put(endpoint: string, body: any) {
    return this.http.put(this.url + '/' + endpoint, body);
  }

  delete(endpoint: string) {
    return this.http.delete(this.url + '/' + endpoint);
  }
}

我要点击的特定端点的服务：

import { Injectable } from '@angular/core';
import { Item } from '../../../models/Item';
import { ApiService } from '../api.service';
import { Observable } from 'rxjs/Observable';

@Injectable ()
export class MarketItemsApi {
    constructor(private Api: ApiService) {}

    getMarketItems(marketItemsQuery: any): Observable<Item[]> {
        return this.Api.post('market-items', marketItemsQuery);
    }
}

我将API模块导入AppModule：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { TabsModule } from '../pages/tabs/tabs.module';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { TabsPageComponent } from "../pages/tabs/tabs.component";

import { ApiModule } from '../providers/api/api.module';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    TabsModule,
    ApiModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    TabsPageComponent
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule { }

然后为我的组件提供特定的API服务：

import { Component, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Item } from "../../models/Item";
import { MarketItemsApi } from '../../providers/api/items/MarketItemsApi.service';

@Component({
  selector: 'page-market',
  templateUrl: 'market.html',
  providers: [ MarketItemsApi ]
})
export class MarketPageComponent implements OnInit {
  marketItems: Item[] = [];

  constructor(private navCtrl: NavController, private MarketItems: MarketItemsApi) { }

  ngOnInit() {
    this.MarketItems
      .getMarketItems({})
      .subscribe(data => {
         console.log(data);
      })
  }
}

该组件包含在自己的功能模块中：

import { MarketPageComponent } from "./market.component";
import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { MarketItemsApi } from '../../providers/api/items/MarketItemsApi.service'


@NgModule({
    imports: [
        IonicPageModule.forChild(MarketPageComponent)
    ],
    declarations: [
        MarketPageComponent
    ],
    providers: [
        MarketItemsApi
    ],
    exports: [
        MarketPageComponent
    ]
})
export class MarketPageModule {}

再将其导入TabsModule：

import { NgModule } from '@angular/core';
import { TabsPageComponent } from "./tabs.component";
import { IonicPageModule } from "ionic-angular";
import { AboutPageModule } from "../about/about.module";
import { ContactPageModule } from "../contact/contact.module";
import { MarketPageModule } from "../market/market.module";

@NgModule({
  imports: [
    IonicPageModule.forChild(TabsPageComponent),
    AboutPageModule,
    ContactPageModule,
    MarketPageModule
  ],
  declarations: [
    TabsPageComponent
  ],
  exports: [
    TabsPageComponent
  ]
})
export class TabsModule { }

然后将其导入AppModule并用作entryComponent。

这是错误：

ERROR Error: Uncaught (in promise): Error: No provider for InjectionToken DocumentToken!
Error: No provider for InjectionToken DocumentToken!

经过大量搜索后，我找不到DocumentToken的文档。关于这里出了什么问题的任何想法？

P.S。这是我的环境：

Ionic Framework: 3.6.1
Ionic App Scripts: 2.1.4
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.11.0
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36

Angular 4 + Ionic：没有DocumentToken的提供者

0 个答案: