ion-tabs 使我的项目无限负载

Question

一个月前，我开始了一个 Ionic 项目，我决定使用空白模板，但是在创建了几个页面之后，我需要在底部制作一个导航栏，就像标签模板上的导航栏一样。

我尝试创建自己的navbar 组件，但是当我将它放在主页上时，应用程序开始加载很长时间，并让我的资源管理器停止工作。

谁能告诉我为什么会这样？

我认为我的另一个选择是更改模板并使用默认具有导航功能的模板，但是我可以更改模板并保留我所做的一切吗？

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } 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 { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import {LoginComponent} from '../components/login/login';
import { UserProvider } from '../providers/user/user';
import {HttpClientModule} from "@angular/common/http";
import {SigningUpPage} from "../pages/signingUp/signingUp";
import { MunicipalitiesProvider } from '../providers/municipalities/municipalities';
import {ViewProfilePage} from "../pages/view-profile/view-profile";
import {NavbarTabsComponent} from "../components/navbar-tabs/navbar-tabs";

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    LoginComponent,
    SigningUpPage,
    ViewProfilePage,
    NavbarTabsComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    SigningUpPage,
    ViewProfilePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    UserProvider,
    MunicipalitiesProvider,
  ]
})
export class AppModule {}

home.html:

<login *ngIf="name == null"></login>

<page-view-profile *ngIf="name != null"></page-view-profile>

<navbar-tabs></navbar-tabs>

导航栏-tabs.html：

<ion-tabs>
  <ion-tab [root]="home" tabTitle="Inicio" tabIcon="home"></ion-tab>
  <ion-tab [root]="profile" tabTitle="Perfil" tabIcon="person"></ion-tab>
</ion-tabs>

导航栏-tabs.ts：

import { Component } from '@angular/core';
import {HomePage} from "../../pages/home/home";
import {ViewProfilePage} from "../../pages/view-profile/view-profile";

@Component({
  selector: 'navbar-tabs',
  templateUrl: 'navbar-tabs.html'
})
export class NavbarTabsComponent {
  home = HomePage;
  profile = ViewProfilePage;

  constructor() {
  }

  ionViewDidLoad(){
    console.log('Hello');
  }
}

该应用位于导航栏分支上的this repo。

Answer 1

你的主页和导航栏标签组件是一个无限循环。

您在 app.component.ts 中将 HomePage 设置为 root。这将在 navstack 中设置 HomePage 并加载它。这反过来又具有您的选项卡组件，该组件再次将HomePage 作为选项卡。它不断尝试为您加载的每个主页生成内部选项卡。

您需要在 app.component.ts 中将NavbarTabsComponent 设置为root，并从HomePage 中删除<navbar-tabs></navbar-tabs>。

同时将NavbarTabsComponent 添加为 app.module.ts 中的entryComponent，因为您将其设置为root。