如何在这个项目中设置ionic中provider的路径？

Question

我正在构建一个带页面的离子应用程序...试图将提供程序导入到 about 组件中，但无法找到该模块，直到在 app.component.ts 中找到该模块 \

//我正在尝试将 dbserviceprovider 导入 about.ts

    import { Component } from '@angular/core';
    import { DbserviceProvider } from '../app/src/providers/dbservice/dbservice';//error is in this line
    import { NavController } from 'ionic-angular';

    export class dat {
      "name": String;
      "topic": String;
      "img": String;
      "description": String;
    }
    @Component({
      selector: 'page-about',
      templateUrl: 'about.html'
    })
    export class AboutPage {

      data: dat[];
      data_dbyes: any[];
      data_yes: any[]
      day: String[];
      temp: String = "../assets/imgs/logo.png";
      constructor(private dbser:DbserviceProvider,public navCtrl: NavController) {
        alert(dbser.test);
        this.data = [{
          "name": "Amil Nayar",
          "topic": "NodeJS",
          "img": "assets/imgs/nodejs.png",
          "description": "Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-sid"
        },
        {
          "name": "Amil Nayar",
          "topic": "NodeJS",
          "img": "assets/imgs/nodejs.png",
          "description": "Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-sid"
        },
        {
          "name": "Priya",
          "topic": "Ionic",
          "img": "assets/imgs/ionic.jpg",
          "description": "Ionic is a complete open-source SDK for hybrid mobile app development. The original version was released in 2013 and built on top of AngularJS and Apache Cordova."
        }
        ];
        this.data_yes = [{
          "name": "Maimuna Fatima",
          "topic": "Html 5",
          "img": "assets/imgs/html5.png",
          "description": "HTML5 is a markup language used for structuring and presenting content on the World Wide Web."
        },
        {
          "name": "Afifa khan",
          "topic": "Bootstrap",
          "img": "assets/imgs/bootstrap.jpg",
          "description": "Bootstrap is a free and open-source front-end web framework for designing websites and web applications"
        }
        ];
        this.data_dbyes = [{
          "name": "Rajendar",
          "topic": "jQuery",
          "img": "assets/imgs/jquery.jpg",
          "description": "jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML."
        },
        {
          "name": "Priya",
          "topic": "Ionic",
          "img": "assets/imgs/jquery.jpg",
          "description": "jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML."
        }
        ];
        console.log(this.data[0].name);
      }

    }


        [**enter image description here**][1]


  [1]: https://i.stack.imgur.com/eWvL3.png




but the same import is working in app.component.ts ...


//app.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
import { TabsPage } from '../pages/tabs/tabs';

import { DbserviceProvider } from '../providers/dbservice/dbservice';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;
  // private dbrecords: any[];


  constructor(private dbservice:  DbserviceProvider, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private sqlite: SQLite) {

    platform.ready().then(() => {
      alert(this.dbservice.test);
      // dbservice.dbconnect();
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      // this.dbrecords = [
      //   {
      //     name: 'hello',
      //     num: 23
      //   }
      // ];

      // this.sqlite.create({
      //   name: 'data.db',
      //   location: 'default'
      // })
      //   .then((db: SQLiteObject) => {

      //     // alert("sqlite object is created and value of db is "+db);

      //     db.executeSql('create table danceMoves(name VARCHAR(32),num INTEGER)', {}).then(() => {
      //       alert("hello db created");
      //       db.executeSql('insert into danceMoves(name,num) values("NCG",43)', {}).then(() => {
      //         // db.executeSql('select * from danceMoves',{}).then((res)=>{
      //         //   alert("in select statment"+res);
      //         // })
      //         db.executeSql('select * from danceMoves', {}).then((res) => {
      //           this.dbrecords[0]['name'] = res.rows.item(0).name;
      //           this.dbrecords[0]['num'] = res.rows.item(0).num;
      //           alert("length is "+res.rows.length);
      //         })
      //         alert("in insert " + this.dbrecords);
      //       })
      //     })
      //       .catch(e => alert("in catch" + e + this.dbrecords));
      statusBar.styleDefault();
      splashScreen.hide();
      //   });
    });

  }


}

//项目结构是...enter image description here

我在构建我的第一个离子应用程序时遇到了这个问题..帮助将不胜感激。

编辑：

我遇到的问题是由于项目结构被别人修改了。

Answer 1

您的提供者 url 应该是 ../../providers/dbservice/dbservice 您需要输入与当前文件相关的这些 url。在这种情况下，您试图将 dbservice 包含在 about.ts 文件中。然后，当您使用 ../ 上升一个级别时，当您使用 ../ 上升另一级时，您位于 pages 文件夹中，您位于 src 中，其中还包括 providers 文件夹。然后输入 providers/dbservice/dbservice

的路线

有关相对路径的详细信息Review this article

Answer 2

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { SQLite, SQLiteObject } from '@ionic-native/sqlite';
import { TabsPage } from '../pages/tabs/tabs';
//edit is the next line
import { DbserviceProvider } from '../../providers/dbservice/dbservice';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage: any = TabsPage;
  // private dbrecords: any[];


  constructor(private dbservice:  DbserviceProvider, platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private sqlite: SQLite) {

    platform.ready().then(() => {
      alert(this.dbservice.test);
      // dbservice.dbconnect();
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      // this.dbrecords = [
      //   {
      //     name: 'hello',
      //     num: 23
      //   }
      // ];

      // this.sqlite.create({
      //   name: 'data.db',
      //   location: 'default'
      // })
      //   .then((db: SQLiteObject) => {

      //     // alert("sqlite object is created and value of db is "+db);

      //     db.executeSql('create table danceMoves(name VARCHAR(32),num INTEGER)', {}).then(() => {
      //       alert("hello db created");
      //       db.executeSql('insert into danceMoves(name,num) values("NCG",43)', {}).then(() => {
      //         // db.executeSql('select * from danceMoves',{}).then((res)=>{
      //         //   alert("in select statment"+res);
      //         // })
      //         db.executeSql('select * from danceMoves', {}).then((res) => {
      //           this.dbrecords[0]['name'] = res.rows.item(0).name;
      //           this.dbrecords[0]['num'] = res.rows.item(0).num;
      //           alert("length is "+res.rows.length);
      //         })
      //         alert("in insert " + this.dbrecords);
      //       })
      //     })
      //       .catch(e => alert("in catch" + e + this.dbrecords));
      statusBar.styleDefault();
      splashScreen.hide();
      //   });
    });

  }


}

如何在这个项目中设置ionic中provider的路径？

How to set the path for provider in ionic in this project?

provider

service

angularjs

hybrid-mobile-app

ionic-framework