Question

我是Ionic的初学者。刚刚在一个月前开始了我的第一个项目，它几乎已经完成了，然后我意识到我的应用在运行localhost:8100时总是指向ionic serve。

示例-在登录首页时，URL应该为localhost:8100/#/home 转到约会页面时，应更改为localhost:8100/#/appointments 但无论我在哪一页，它都会显示localhost:8100

我正在使用延迟加载。我已经将延迟加载的模块包含在app.module.ts中。我已将应用程序页面IonicPageModule导入和导出包含在我的延迟加载模块中。我在@IonicPage({name: ‘name’, segment: ‘name’})中使用了component.ts。

app.module.ts-

import { AppointmentsPageModule } from './../pages/appointments/appointments.module';
import { AppointmentsPage } from './../pages/appointments/appointments';
...

@NgModule({
  declarations: [
    MyApp,
    AppointmentsPage,
    ...
  ],
  imports: [
    AppointmentsPageModule
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AppointmentsPage,
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule {}

appointments.module.ts-

import { AppointmentsPage } from './appointments';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [

  ],
  imports: [
    IonicPageModule.forChild(AppointmentsPage)
  ],
  exports: [
    AppointmentsPage
  ]
})
export class AppointmentsPageModule {}

并将其包含在约会中-

@IonicPage({
  name: 'appointments',
  segment: 'appointments'
})

我正在使用

this.navCtrl.push('appointments');

我一直在所有google和Ionic Worldwide Slack上寻求解决方案，但找不到解决方案。请协助。

离子CLI版本-4.0.3 科尔多瓦版本-8.0.0

Answer 1

您正在导入 app.module.ts 中的所有页面和模块。仅将页面导入到该特定模块，也不要将模块导入到 app.module.ts 。

在代码中，如果使用的是延迟加载，请在 appointments.module.ts 中而不是在 app.module.ts 中声明“ AppointmentsPage”。另外，请勿在 app.module.ts 中导入AppointmentsPageModule。

如果使用命令“ ionic generate page Appointments”生成页面，则ionic将自动处理所有这些，您无需手动导入所有这些。

通过这种方式，导航到“ AppointmentsPage”将更新url localhost：8100 /＃/ appointments。

Answer 2

因此，在深入研究博客文章，离子文档并从@MDM收集指针之后，我终于找到了一个解决方案，并将其用于我的应用程序。这就是我所做的-

app.module.ts => 请勿在此处导入任何页面。实际上，不需要在整个项目中的任何ts文件中导入任何页面

@NgModule({
  declarations: [
    MyApp,
   // No need to import any pages.
    ...
  ],
  imports: [
    // No need to import any lazy loaded modules
    ...
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    // No need to import pages here either
    ...
  ],
  providers: [
    ...
  ]
})
export class AppModule {}

延迟加载的page.module.ts文件=> 任何页面，为此特定延迟加载的页面导入的模块都会在此处

import { AppointmentsPage } from './appointments';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';

@NgModule({
  declarations: [
    AppointmentsPage
  ],
  imports: [
    IonicPageModule.forChild(AppointmentsPage)
  ],
  entryComponents: [
    AppointmentsPage
  ],
  exports: [
    AppointmentsPage
  ]
})
export class AppointmentsPageModule {}

注意，我已经声明了页面，导入了模块并导出了页面。

在page.ts文件中，@component装饰器=>

之前

@IonicPage({
  name: 'AppointmentsPage',
  segment: 'appointments'
})

我已将名称添加为“ AppointmentsPage”，因为我觉得对所有push / setRoot / Popovers和Modals进行更改会更容易，但这是您的选择！

最后推送到页面=>

this.nav.push('AppointmentsPage');
OR
this.nav.setRoot('AppointmentsPage');
OR
this.popoverCtrl.create('AppointmentsPage');

注意：请注意我们需要如何在单引号中包含页面名称

总结一下，

您不需要导入任何页面组件/可以在任何地方使用
您不需要将任何页面模块导入您的app.module.ts
您不需要在app.module.ts
您需要像这样'MyPage'而不是MyPage输入页面名称（将要求您导入页面）。

Ionic 3缺少导航URL

2 个答案: