Question

我正在构建一个Angular and Ionic应用程序，其中需要我当前页面的URL，该URL显示在浏览器的地址栏中。这样做，我正在使用router.url，但出现错误：

错误：未捕获（承诺）：错误：StaticInjectorError [路由器]：
StaticInjectorError [路由器]： NullInjectorError：没有路由器的提供程序！错误：StaticInjectorError [路由器]：StaticInjectorError [路由器]： NullInjectorError：没有路由器的提供程序！在 NullInjector.get（http://localhost:8100/build/vendor.js:1277:19）在resolveToken（http://localhost:8100/build/vendor.js:1565:24）在tryResolveToken（http://localhost:8100/build/vendor.js:1507:16）在StaticInjector.get（http://localhost:8100/build/vendor.js:1378:20）在resolveToken（http://localhost:8100/build/vendor.js:1565:24）在tryResolveToken（http://localhost:8100/build/vendor.js:1507:16）在StaticInjector.get（http://localhost:8100/build/vendor.js:1378:20）在resolveNgModuleDep（http://localhost:8100/build/vendor.js:10939:25）在NgModuleRef .get（http://localhost:8100/build/vendor.js:12160:16）在resolveDep（http://localhost:8100/build/vendor.js:12656:45）在c（http://localhost:8100/build/polyfills.js:3:19752）在Object.reject（http://localhost:8100/build/polyfills.js:3:19174）在NavControllerBase._fireError（http://localhost:8100/build/vendor.js:50002:16）在NavControllerBase._failed（http://localhost:8100/build/vendor.js:49995:14）在http://localhost:8100/build/vendor.js:50042:59 在t.invoke（http://localhost:8100/build/polyfills.js:3:14976）在Object.onInvoke（http://localhost:8100/build/vendor.js:4983:33）在t.invoke（http://localhost:8100/build/polyfills.js:3:14916）在r.run（http://localhost:8100/build/polyfills.js:3:10143）在http://localhost:8100/build/polyfills.js:3:20242

组件代码为：

import {Component, Pipe, PipeTransform} from '@angular/core';
import {IonicPage, NavController, NavParams, Platform, ViewController, ToastController} from 'ionic-angular';
import {ScreenOrientation} from '@ionic-native/screen-orientation';
import {DomSanitizer, SafeUrl, SafeResourceUrl} from "@angular/platform-browser";
import { ApiProvider } from './../../providers/api/api';
import { Router } from '@angular/router';

@IonicPage()
@Component({
    selector: 'page-play',

    templateUrl: 'play.html',
    providers: [ScreenOrientation]
})

export class PlayPage {

    constructor(platform: Platform,private router: Router, public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController, private screenOrientation: ScreenOrientation, public toastCtrl: ToastController, private sanitizer: DomSanitizer, public apiProvider: ApiProvider) {


this.location=this.router.url;
        console.log("LOCATION"+this.location);
    }
}

我的module.ts是：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule, Pipe } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { MyApp } from './app.component';
import { TabPage } from '../pages/tab/tab';
import {VgCoreModule} from 'videogular2/core';
import {VgControlsModule} from 'videogular2/controls';
import {VgOverlayPlayModule} from 'videogular2/overlay-play';
import {VgBufferingModule} from 'videogular2/buffering';
import { ApiProvider } from '../providers/api/api';
//import { Databaseservice } from '../providers/api/Databaseservice';
import {GetstartedPage} from '../pages/getstarted/getstarted'
import { HttpClientModule } from '@angular/common/http';
import {LoginPage} from '../pages/login/login';
import {LoginPageModule} from '../pages/login/login.module'
import {SongsPage} from '../pages/songs/songs'
import {SongsPageModule} from '../pages/songs/songs.module'
import {VideosPage} from '../pages/videos/videos'
import {VideosPageModule} from '../pages/videos/videos.module'
import {EmbedvideoPage} from '../pages/embedvideo/embedvideo'
import {EmbedvideoPageModule} from '../pages/embedvideo/embedvideo.module'
import {PlayPage} from '../pages/play/play'
import {PlayPageModule} from '../pages/play/play.module'
import {EventsPage} from '../pages/events/events'
import {EventsPageModule} from '../pages/events/events.module'
import {ProfilePage} from '../pages/profile/profile'
import {ProfilePageModule} from '../pages/profile/profile.module'
import {SettingsPage} from '../pages/settings/settings'
import {SettingsPageModule} from '../pages/settings/settings.module'
import {AudioplayertwoPage} from '../pages/audioplayertwo/audioplayertwo'
import {AudioplayertwoPageModule} from '../pages/audioplayertwo/audioplayertwo.module'
import {ViewAllPage} from '../pages/view-all/view-all'
import {ViewAllPageModule} from '../pages/view-all/view-all.module'


import {PricePage} from '../pages/price/price'
import {PricePageModule} from '../pages/price/price.module'
import { GetstartedPageModule } from '../pages/getstarted/getstarted.module';
import { IonicStorageModule } from '@ionic/storage';
import { AngularFireModule } from 'angularfire2';
import * as firebase from 'firebase';
import 'firebase/messaging'; // only import firebase messaging or as needed;
import { firebaseConfig } from '../environment';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';
import { RouterModule,Router } from '@angular/router';



firebase.initializeApp(firebaseConfig);
var database = firebase.database();
//.............
@NgModule({
    declarations: [
        MyApp,
        TabPage,
        // SingleMediaPlayer
    ],


    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp, {}, {
            links: [
                  { component: LoginPage, name: 'LoginPage', segment: 'login' },
                { component: SongsPage, name: 'SongsPage', segment: 'songs' },
                { component: VideosPage, name: 'VideosPage', segment: 'm/videos' },
                { component: EventsPage, name: 'EventsPage', segment: 'm/events' },
                { component: PlayPage, name: 'PlayPage', segment: 'm/watch/:name' },
                { component: EmbedvideoPage, name: 'EmbedvideoPage', segment: 'embed' },
                { component: ProfilePage, name: 'ProfilePage', segment: 'profile' },
                { component: SettingsPage, name: 'SettingsPage', segment: 'settings' },
                { component: PricePage, name: 'PricePage', segment: 'price' },
                { component: AudioplayertwoPage, name: 'AudioplayertwoPage', segment: 'Audioplayer' },
                { component: TabPage, name: 'TabPage', segment: 'tab' } ,
                 { component: ViewAllPage, name:'ViewAllPage',segment:'m/viewAll/:name'}
            ]
        }),
        SuperTabsModule.forRoot(),
        VgCoreModule,
        VgControlsModule, PlayPageModule, ProfilePageModule, SettingsPageModule, PricePageModule, AudioplayertwoPageModule,
        VgOverlayPlayModule, GetstartedPageModule, LoginPageModule, SongsPageModule, VideosPageModule, EventsPageModule, EmbedvideoPageModule,
        VgBufferingModule, VideosPageModule, HttpClientModule, ViewAllPageModule, AngularFireModule.initializeApp(firebaseConfig), IonicStorageModule.forRoot(), AngularFireDatabaseModule
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
       VideosPage, GetstartedPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler }, { provide: LocationStrategy, useClass: PathLocationStrategy }, ApiProvider
    ]
})
export class AppModule { }

我知道我必须在module.ts中添加一些内容。但是我没有弄清楚。

Answer 1

您必须将RouterModule导入您自己的模块中。

EDIT 还在您的第一个构造函数参数中添加了访问修饰符：

constructor(public platform: Platform, ...)

或将其放在参数的最后。

Answer 2

您必须在模块导入中执行此操作吗？

    $iemail = empty( $_POST[$key]['iemail'] ) ? NULL : $_POST[$key]['iemail'];
    if($query != "") {
      $query .= ",";
    }
    $query .= " ( '$iname', '$isurname', '$iemail' ) ";

Answer 3

https://angular.io/guide/router说：

路由的Angular应用程序具有一个Router服务的单例实例。

...

在配置路由器之前，路由器没有路由。下面的示例创建四个路由定义，通过RouterModule.forRoot方法配置路由器，并将结果添加到AppModule的imports数组中。

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
  {
    path: 'heroes',
    component: HeroListComponent,
    data: { title: 'Heroes List' }
  },
  { path: '',
    redirectTo: '/heroes',
    pathMatch: 'full'
  },
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    )
    // other imports here
  ],
  ...
})
export class AppModule { }

因此，为了使用路由器实例，您需要首先使用RouterModule.forRoot方法在根模块中创建它。您可以遵循official guide-这很简单。

Answer 4

添加import { HttpModule } from '@angular/http'；在app.module.ts中，用于Http

或

在app.module.ts中为httpclient添加import {HttpClientModule} from '@angular/common/http';

获取当前URL可为路由器提供静态注入器错误

4 个答案: