Question

我在使用Angular 7的Ionic 4上导航时遇到问题。URL在URL栏上更改，但实际上并没有更新页面。这是我的应用程序组件html：

    <ion-app>
     <ion-split-pane [when]="authenticated">
        <ion-menu class="menu menu-left" *ngIf="authenticated">
            <ion-header>

            </ion-header>

            <ion-content class="scroll-content ionic-scroll has-header">
                <ion-list>
                    <ion-item class="item-icon-left menu-item item-complex">
                        <a routerLink="/home">
                            <ion-icon name="home"></ion-icon>
                            Home
                        </a>
                    </ion-item>
                </ion-list>

                <ion-fab vertical="bottom" horizontal="start" color="light">
                    <ion-fab-button routerLink="/settings"><ion-icon name="settings"></ion-icon></ion-fab-button>
                </ion-fab>
            </ion-content>
        </ion-menu>
        <ion-router-outlet main></ion-router-outlet>
    </ion-split-pane>
</ion-app>

这是打字稿：

authenticated = false;
    constructor(private router: Router, private platform: Platform, private events: Events, private auth: AuthProvider)
{
 this.auth.authenticationState.subscribe((state) => {
   this.authenticated = state;
   if (!state) {
     this.router.navigate(['login']);
 }
 });
}

这是我的app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {AuthGuardService} from './services/auth/auth-guard.service';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full', canActivate: [AuthGuardService] },
  { path: 'test', loadChildren: './pages/test/test.module#TestPageModule', canActivate: [AuthGuardService] },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule', canActivate: [AuthGuardService] },
  { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
  { path: 'register', loadChildren: './pages/register/register.module#RegisterPageModule' },
  { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule', canActivate: [AuthGuardService] },
  { path: 'settings', loadChildren: './pages/settings/settings.module#SettingsPageModule', canActivate: [AuthGuardService] },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

我注意到，在我的 global.scss 文件中，我以前已经注释掉@import "~@ionic/angular/css/core.css";行。取消注释此行即可解决问题。

Ionic 4页面未在导航上更新

1 个答案: