Question

这是我使用ionic4的第一个应用程序，并且发生了一些奇怪的事情。当我点击任何链接时，会有延迟，并且整个背景会在加载页面之前闪烁。这是一个显示这种奇怪行为的视频：https://youtu.be/NqoOMQYyr4k

作为参考，以下是页面代码：

在 global.scss 上，我具有此属性来设置背景

ion-content {
  --background: #000 url('./assets/images/main-bg.png') no-repeat center center / cover;
}

news.page.ts

import { News } from './news.model';
import { Component, OnInit } from '@angular/core';
import { NewsService } from '../services/news.service';
import { Router } from '@angular/router';
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-news',
  templateUrl: './news.page.html',
  styleUrls: ['./news.page.scss'],
})
export class NewsPage implements OnInit {

  news: any;

  constructor(private newsService: NewsService, private router: Router, private navController: NavController) { }

  ngOnInit() {
    this.news = this.newsService.getAllEvents();
  }

  go(id: string) {
    this.navController.navigateForward('news/' + id);
  }
}

news.page.html

<ion-header>

  <ion-toolbar color="grey">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title style="color: #524A4A!important">News</ion-title>
  </ion-toolbar>
</ion-header>


<ion-content>
  <ion-grid padding class="margin-logo-header">
    <ion-row>
      <div>
        <h2>Noticias HD Friends</h2>
      </div>
    </ion-row>
  </ion-grid>


  <ion-card color="grey" *ngFor="let news of news | async">
    <ion-nav-pop (click)="go(news.id)" >
      <ion-img src="{{news.picture}}"></ion-img>
      <ion-card-header>
        <ion-card-title>{{ news.title }}</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <p>{{ news.subtitle }}</p>
      </ion-card-content>
    </ion-nav-pop>

  </ion-card>


</ion-content>

news.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import { News } from '../news/news.model';

@Injectable({
  providedIn: 'root'
})
export class NewsService {

  NODE = 'news/';
  news: AngularFireList<News[]>;

  constructor(private db: AngularFireDatabase) { }

  getAllEvents() {
    const localNews = this.db.list(this.NODE);
    return localNews.valueChanges();
  }

  getNews(id: string) {
    return this.db.object(this.NODE + id);
  }
}

这是一个错误，是因为它是一个Beta还是我搞砸了？

谢谢大家

更新1
这似乎是离子框架的错误。收到任何内容后，我会在此处发布以供将来参考。

离子4背景闪烁并轻按延迟

0 个答案: