router.navigate() 不是 function

Question

我正在構建一個離子應用程序並使用 angular 路由。 我希望我的成功登錄導致應用程序進入我的主標簽頁。 我的代碼附在下面。 知道為什么導航 function 未被識別嗎？ 我的假設是路由模塊沒有被正確導入，但它被 IDE 識別，所以我還是迷路了。

登錄頁面.ts

import { Component, OnInit } from '@angular/core';
import {FirebaseUISignInFailure, FirebaseUISignInSuccessWithAuthResult} from 'firebaseui-angular';
import { Storage } from '@ionic/storage';
import {RouterModule} from '@angular/router';
import {AppRoutingModule} from '../app-routing.module';


// tslint:disable-next-line:import-spacing

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
  // tslint:disable-next-line:no-shadowed-variable
  constructor(private Storage: Storage, public router: RouterModule) { }

  ngOnInit() {
  }

  successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
    this.Storage.set('uid',signInSuccessData.authResult.user.uid);
    this.router.navigate("['/tabs']");
  }

  errorCallback(errorData: FirebaseUISignInFailure) {

  }

}

登錄模塊.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import {IonicStorageModule} from '@ionic/storage';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

// tslint:disable-next-line:import-spacing

import {FirebaseUIModule, firebase, firebaseui} from 'firebaseui-angular';

import {AngularFireModule} from '@angular/fire';
import {AngularFireAuthModule} from '@angular/fire/auth';
import {environment} from '../../environments/environment';
import {AppComponent} from '../app.component';
import {RouterModule} from '@angular/router';
import {AppRoutingModule} from '../app-routing.module';
import {TabsPage} from '../tabs/tabs.page';

const firebaseUiAuthConfig: firebaseui.auth.Config = {
  signInFlow: 'popup',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  ],
  tosUrl: 'google.com',
  privacyPolicyUrl: 'google.com',
  credentialHelper: firebaseui.auth.CredentialHelper.ACCOUNT_CHOOSER_COM
};

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    IonicStorageModule.forRoot(),
    LoginPageRoutingModule,
    RouterModule.forRoot([
      {path: 'tabs', component: TabsPage}
    ]),
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAuthModule,
    FirebaseUIModule.forRoot(firebaseUiAuthConfig)
  ],
  declarations: [LoginPage],
  bootstrap: [LoginPage]
})
export class LoginPageModule {
}

Answer 1

您需要注入 Router 而不是 RouterModule

  constructor(private router: Router) { }

並導航 function 應該沒有"" ，

 this.router.navigate(['/tabs']);

Answer 2

看起來你忘了導出路由模塊

@NgModule({
  imports: [RouterModule.forRoot(
    [{path: 'tabs', component: TabsPage}]
  )],
  exports: [RouterModule]
})

通過添加導出來導出路由器模塊exports: [RouterModule] 。

和

1. 將構造函數導入更改為constructor(private router: Router)
2. 更改路由器導航this.router.navigate("['/tabs']"); 到this.router.navigate(['/tabs']);