javascript - 获取当前 URL 会给出 Router 的静态注入(inject)器错误

Question

我正在构建一个 Angular 和 Ionic 应用程序，我需要我当前页面的 URL，即显示在浏览器地址栏中的 URL。为此，我使用了 router.url，但出现错误:

Error: Uncaught (in promise): Error: StaticInjectorError[Router]:
StaticInjectorError[Router]: NullInjectorError: No provider for Router! Error: StaticInjectorError[Router]: StaticInjectorError[Router]: NullInjectorError: No provider for Router! at NullInjector.get (http://localhost:8100/build/vendor.js:1277:19) at resolveToken (http://localhost:8100/build/vendor.js:1565:24) at tryResolveToken (http://localhost:8100/build/vendor.js:1507:16) at StaticInjector.get (http://localhost:8100/build/vendor.js:1378:20) at resolveToken (http://localhost:8100/build/vendor.js:1565:24) at tryResolveToken (http://localhost:8100/build/vendor.js:1507:16) at StaticInjector.get (http://localhost:8100/build/vendor.js:1378:20) at resolveNgModuleDep (http://localhost:8100/build/vendor.js:10939:25) at NgModuleRef.get (http://localhost:8100/build/vendor.js:12160:16) at resolveDep (http://localhost:8100/build/vendor.js:12656:45) at c (http://localhost:8100/build/polyfills.js:3:19752) at Object.reject (http://localhost:8100/build/polyfills.js:3:19174) at NavControllerBase._fireError (http://localhost:8100/build/vendor.js:50002:16) at NavControllerBase._failed (http://localhost:8100/build/vendor.js:49995:14) at http://localhost:8100/build/vendor.js:50042:59 at t.invoke (http://localhost:8100/build/polyfills.js:3:14976) at Object.onInvoke (http://localhost:8100/build/vendor.js:4983:33) at t.invoke (http://localhost:8100/build/polyfills.js:3:14916) at r.run (http://localhost:8100/build/polyfills.js:3:10143) at 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, ...)

或者把它放在参数的最后。