Мое приложение ioni c мигает между страницами ... Как я могу это исправить? - PullRequest
0 голосов
/ 21 апреля 2020

My ioni c приложение мигает между страницами ..

Есть много страниц и кнопок, связывающих их все .. Все плагины работают нормально ... Все хорошо, за исключением того, что на каждой странице меняйте весь экран мигает белым в течение примерно 0,05 секунд

Я не уверен, какие еще детали мне нужно предоставить ...

Я скопировал HTML двух страниц, которые связаны кнопками , Я также скопировал модуль маршрутизации приложения.

Вот html из двух страниц: Страница 1

<ion-content >
  <ion-grid style="background-image: url('/assets/img/homescreenbg.png'); 
  height: 100%; min-height: 100vh;
  width: 100%; min-width: 100vw;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;">

    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-img src="/assets/img/icon.png"></ion-img>

          <div class="ion-text-center">
            <ion-text color="light">
            Of course I talk to myself...<br>
            Sometimes I need expert advice!</ion-text><br><br>
            HARNESS THE POWER OF POSITIVE AFFIRMATIONS<br><br>
            <ion-button href="/instructions">Instructions</ion-button>
            <ion-button href="/topics">Get Started!</ion-button><br><br>
            <ion-button href="/about">About this App</ion-button>
          </div>

      </ion-col>
    </ion-row>
  </ion-grid> 
</ion-content>

HTML Страница 2

<ion-header>
  <ion-toolbar color="tertiary">
    <ion-title>Connect With Us!</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content scroll-y="false">

  <ion-grid style="background-color:#0c3783; height: 100%; min-height: 100vh;">
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <ion-card style="background-color:#f0f0f0">

          <ion-card-content class="ion-text-center">

            Connect with us on Social Media...<br>
          Tell us what you think of this app!<br>
          Subscribe and follow for more great stuff!<br>
            <ion-grid>
             <ion-row>
              <ion-col>
                <a href="http://www.facebook.com/nicklussonmotivation"><ion-img src="/assets/img/facebook.png"></ion-img>
                Facebook</a>
              </ion-col>
              <ion-col>
                <a href="http://www.instagram.com/nicklussonmotivation"> <ion-img src="/assets/img/instagram.png"></ion-img>
                Instagram</a></ion-col>
              <ion-col>
                <a href="http://www.YouTube.com/NickLussonMotivation"><ion-img src="/assets/img/youtube.png"></ion-img>
                YouTube</a></ion-col><ion-col>
                  <a href="http://www.linkedin.com/Lusson_Nick"><ion-img src="/assets/img/linkedin.png"></ion-img>
                  LinkedIn</a></ion-col>
             </ion-row>
             <ion-col>
              <a href="http://www.nicklusson.com"><ion-img src="/assets/img/nlmlogo.png"></ion-img>
               www.NickLusson.com</a>
             </ion-col>
           </ion-grid>
           <br><br>
           <ion-button href="/about" color="success">
            <ion-icon name="gift-outline"></ion-icon>Free Gifts</ion-button><br>
          <ion-button href="/home">
            <ion-icon name="home" color="light"></ion-icon>Home</ion-button>  
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
<ion-footer>
  <ion-toolbar  color="tertiary">
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/results"></ion-back-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Здесь такое app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)},
  {
    path: 'instructions',
    loadChildren: () => import('./instructions/instructions.module').then( m => m.InstructionsPageModule)
  },
  {
    path: 'topics',
    loadChildren: () => import('./topics/topics.module').then( m => m.TopicsPageModule)
  },
  {
    path: 'love1',
    loadChildren: () => import('./love1/love1.module').then( m => m.Love1PageModule)
  },
  {
    path: 'love2',
    loadChildren: () => import('./love2/love2.module').then( m => m.Love2PageModule)
  },
  {
    path: 'sleep1',
    loadChildren: () => import('./sleep1/sleep1.module').then( m => m.Sleep1PageModule)
  },
  {
    path: 'sleep2',
    loadChildren: () => import('./sleep2/sleep2.module').then( m => m.Sleep2PageModule)
  },
  {
    path: 'confidence1',
    loadChildren: () => import('./confidence1/confidence1.module').then( m => m.Confidence1PageModule)
  },
  {
    path: 'confidence2',
    loadChildren: () => import('./confidence2/confidence2.module').then( m => m.Confidence2PageModule)
  },
  {
    path: 'fitness1',
    loadChildren: () => import('./fitness1/fitness1.module').then( m => m.Fitness1PageModule)
  },
  {
    path: 'fitness2',
    loadChildren: () => import('./fitness2/fitness2.module').then( m => m.Fitness2PageModule)
  },
  {
    path: 'money1',
    loadChildren: () => import('./money1/money1.module').then( m => m.Money1PageModule)
  },
  {
    path: 'money2',
    loadChildren: () => import('./money2/money2.module').then( m => m.Money2PageModule)
  },
  {
    path: 'gratitude1',
    loadChildren: () => import('./gratitude1/gratitude1.module').then( m => m.Gratitude1PageModule)
  },
  {
    path: 'gratitude2',
    loadChildren: () => import('./gratitude2/gratitude2.module').then( m => m.Gratitude2PageModule)
  },
  {
    path: 'results',
    loadChildren: () => import('./results/results.module').then( m => m.ResultsPageModule)
  },
  {
    path: 'about',
    loadChildren: () => import('./about/about.module').then( m => m.AboutPageModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...