Question

我一直关注离子教程： Ionic 2：调用API <10分钟

打字稿错误   模块'“C：/ Users / grace / imaginemai / client / apiApp / src / providers / people-＆gt; service / people-service”'没有导出成员'PeopleSevice'。   C：/Users/grace/imaginemai/client/apiApp/src/pages/home/home.ts

从'ionic-angular'中导入{NavController};

从＆gt;'C：\ Users \ grace \ imaginemai \ client \ apiApp \ src \ providers \ people-＆gt;导入{PeopleSevice} ＆GT;服务\人服务';

我不确定我做错了什么。我注意到原始教程可能存在错误，因此我根据评论中发布的更正做了一些修改：https://github.com/ah3243/ionic2ApiExample/blob/master/src/providers/people-search.ts

我仍然遇到问题 - 我已经按照教程进行了操作，但是在我使用Django开发的博客中使用了自己的API。因此，虽然离子应用程序被称为人员服务，但我希望它能够生成博客文章。代码粘贴在下面。请有人能告诉我我做错了什么。

提前致谢。

人service.ts：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the PeopleServiceProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class PeopleService {
  data1: any;
  constructor(public http: Http) {
    console.log('Hello PeopleService Provider');
  }

  load() {
    if (this.data1) {
      return Promise.resolve(this.data1);
      }
      //dont have the data yet
      return new Promise(resolve => {
      this.http.get('localhost:8000/posts/')
        .map(res => res.json())
        .subscribe(data => {
          this.data1 = data.results;
          resolve(this.data1);
          });
      });
    }

}

home.ts：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {PeopleSevice} from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [PeopleSevice]
})
export class HomePage {
  public posts: any;
  constructor(public navCtrl: NavController, public peopleService: PeopleService) {
    this.loadPosts();

  }

  loadPosts() {
    this.PeopleService.load()
      .then(data1 => {
        this.posts = data1;
      })

    }

}

app.module.ts：

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 { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
/*import { PeopleService } from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';*/

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: [
    /*StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    PeopleService*/
  ]
})
export class AppModule {}

app.component.ts：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { TabsPage } from '../pages/tabs/tabs';
import { PeopleService } from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = TabsPage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

home.html的：

<ion-header>
  <ion-navbar *navbar>
    <ion-title>
      Home
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let post of posts">
      <h2>{{post.title}}</h2>
      <p>{{post.text}}</p>
    </ion-item>
  </ion-list>
</ion-content>

文件夹结构：

blog
>client
 >apiApp
  >src
   >app
    >app.component.ts
    >app.html
    >app.module.ts
    >app.scss
    >main.ts
   >pages
   >providers
    >people-service
     >people-service.ts

Answer 1

您必须使用相对路径进行导入。

import {PeopleSevice} from 'C:\\Users\\grace\\imaginemai\\client\\apiApp\\src\\providers\\people-service\\people-service';

这种绝对路径不起作用。

尝试：

import {PeopleSevice} from '../../providers/people-service/people-service';

这是当前文件的相对路径。

模块没有名为PeopleService的导出模块 - Ionic

1 个答案: