获取当前 URL 会导致路由器的静态注入器错误

Question

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

错误：未捕获（承诺）：错误：StaticInjectorError[Router]：
静态注入器错误[路由器]： NullInjectorError：没有路由器的提供者！错误：StaticInjectorError[Router]：StaticInjectorError[Router]： 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

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

或者

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

Answer 3

你必须在你的模块导入中这样做吗？

RouterModule.forRoot(
  [
    { path: "", component: PlayPage}
  ]
)

Answer 4

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 - 很简单。