页面url在ionic2上推送页面时写入

问题描述 投票:-1回答:1

所有我都是关于ionic2和angular2的新手我想问这个方法是否真实?我有一个数组,其中包含一些带有页面属性示例的菜单

{
"menu" : [
      {"nama" : "My Repair Request","page":"RepairRequestPage","icon":"ios-hammer-outline"},
      {"nama" : "My Front Desk Instruction","page":"FrontDeskinstPage","icon":"ios-desktop-outline"},
      {"nama" : "Amenity Reservation","page":"","icon":"ios-clipboard-outline"},
      {"nama" : "My Delivery","page":"","icon":"ios-cube-outline"}
    ]
}

然后我循环查看并给出一些功能:

<div>
    <ion-card class="menuCard center_content" *ngFor="let item of list_menu" (click) = 'openMenu(item)'>
      <ion-icon ios="{{item.icon}}" md="{{item.icon}}" ></ion-icon>
      <span>
        {{item.nama}}
      </span>
    </ion-card>
  </div>

功能是:

openMenu (param : any) {
    this.navCtrl.push(param.page);
  }

首先我注意到,当页面被推送时,有一些链接写在URL栏http://localhost:8100/#/home/repair-request

我想问一下是不是在角度2路线没有像这样运行我有点好奇这可以有人向我解释它是否是正确的...

[]

javascript angular ionic2
1个回答
0
投票

您必须创建一个RouterModule实例,它将执行我们所需的路由功能。

之后,您只需将路径对象数组传递给RouterModule上的forRootforChild方法。

此外,请确保您正在对useHash的RouterModule选项执行false

{useHash:false}

useHash:启用使用URL片段而不是历史API的位置策略。

检查app.routes.ts中的以下示例代码

          import { ModuleWithProviders } from '@angular/core';
          import { RouterModule } from '@angular/router';

          // custom imports
          import { Page1Component } from '../pages/page1/page1.component';
          import { Page2Component } from '../pages/page2/page2.component';
          import { Page3Component } from '../pages/page3/page3.component';


          export const APP_ROUTES_PROVIDER: ModuleWithProviders = RouterModule.forRoot(
              [
                  { path: '', redirectTo: '/page1', pathMatch: 'full' },
                  { path: 'page1', component: Page1Component },
                  { path: 'page2', component: Page2Component },
                  { path: 'page3', component: Page3Component}
              ] , {useHash: false});

对于每条路线,我们提供一个pathcomponent,应该在该路径上呈现。 HomeComponent路径的空字符串表示在没有URL时将呈现HomeComponent。

然后,您只需将我们的新路由模块导入应用程序模块即可。

imports: [
 APP_ROUTES_PROVIDER,
 IonicModule.forRoot(MyApp)
],

如需更多帮助,请查看此link1link2

希望这会对你有所帮助!!

© www.soinside.com 2019 - 2024. All rights reserved.