Ionic-framework: Ionic 3.5.0 奇怪的 URL 行为“nav/n4”和“tabs/t0/page”

创建于 2017-07-13  ·  53评论  ·  资料来源: ionic-team/ionic-framework

离子版本:(用“x”检查一个)
[ ] 1.x (对于 Ionic 1.x 问题,请使用 https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x] 3.x

我正在提交一个 ... (用“x”检查一个)
[x] 错误报告
[ ] 功能要求
[ ] 支持请求 => 请不要在此处提交支持请求,请使用以下渠道之一: https : http://ionicworldwide.herokuapp.com/

当前行为:

Ionic 3.5.0 奇怪的 URL 行为
我的应用程序有基本的界面! 一个 LoginPage、SignupPage...登录或注册后它会进入选项卡界面..我想没什么特别的!
首先,“nav/n4”是默认行为吗?
http://localhost :8100/#/nav/n4/login
http://localhost :8100/#/nav/n4/app/tabs/t0/perfil/perfil

我用 ionic g 创建了页面和标签
对于所有页面,我都为它们设置了段,例如,名称如下:
@IonicPage({ 段:'perfil' })

预期行为:

http://localhost :8100/#/login
http://localhost :8100/#/app/perfil

重现步骤:

相关代码:

login.module.ts

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

import {SharedModule} from '../../shared/shared.module';

import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
    SharedModule
  ],
  exports: [
    LoginPage
  ]
})
export class LoginPageModule {}
login.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, MenuController, LoadingController, AlertController, Events } from 'ionic-angular';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ControlValidator } from '../../validators/control-validator';

import { Config } from '../../config/config';

import { Storage } from '@ionic/storage';

import {UserProvider} from '../../providers/user/user.provider';
import {SocialProvider} from '../../providers/social/social.provider';

@IonicPage({
    segment:'login'
})
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {

    user:any = {};
    form:FormGroup;
    submitted:boolean = false;

    private loader:any;
    private alert:any;

  constructor(
    public navCtrl: NavController,
    public menuCtrl:MenuController,
        public loaderCtrl:LoadingController,
    public alertCtrl:AlertController,
    public events:Events,
    public formBuilder:FormBuilder,
    public storage:Storage,
    public userService:UserProvider,
    public socialService:SocialProvider,
    public config:Config) {

    this.user = {
      email:'',
      password:''
    }

    this.form = formBuilder.group({
      email:[this.user.email, Validators.compose([ControlValidator.isEmailValid])],
      password:[this.user.password, Validators.compose([Validators.required, Validators.minLength(5)])]
    });
  }

  ionViewDidLoad() {
    this.menuCtrl.enable(false);
  }

  showLoading(){
    this.loader = this.loaderCtrl.create({
      content: 'Verificando as suas credenciais...'
    });
    this.loader.present();
  }

  showAlert(subtitle:string){
    this.alert = this.alertCtrl.create({
      title: 'LOGIN',
      subTitle:subtitle,
      buttons:['OK'],
      cssClass:'alert-login'
    });
    this.alert.present();
  }

  openPage(page:string){
    this.navCtrl.push(page);
  }

  private onError(err:string){
    this.showAlert(err);
  }

  login(){
    this.submitted = true;
    if(!this.form.valid){
      return;
    }
    this.showLoading();
    this.user = this.form.value;
    this.userService.login(this.user)
    .then(res=>{
        if(res) {
            this.loader.dismiss()
            .then(()=>{
              setTimeout(()=>{
                this.navCtrl.setRoot('TabsPage');
                });
            });         
        }else{

        }
    })
    .catch(this.onError);    
  }
}
tabs.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage
  ],
  imports: [
    IonicPageModule.forChild(TabsPage),
  ]
})
export class TabsPageModule {}
tabs.ts

import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';

@Component({
  selector: 'page-tabs',
  templateUrl: 'tabs.html'
})
@IonicPage({
    segment:'app'
})
export class TabsPage {

  perfilRoot = 'PerfilPage';
  agendaRoot = 'AgendaPage';
  newsRoot = 'NewsPage';
  ticketsRoot = 'TicketsPage';
  myFestivalRoot = 'MyFestivalPage';

  constructor(public navCtrl: NavController) {}

}

perfil.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PerfilPage } from './perfil';

@NgModule({
  declarations: [
    PerfilPage,
  ],
  imports: [
    IonicPageModule.forChild(PerfilPage),
  ],
  exports: [
    PerfilPage
  ]
})
export class PerfilPageModule {}

perfil.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage({
    segment:'perfil'
})
@Component({
  selector: 'page-perfil',
  templateUrl: 'perfil.html',
})
export class PerfilPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

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

}

其他信息:

离子信息:(从终端/cmd 提示符运行ionic info并粘贴下面的输出):

global packages:

    @ionic/cli-utils : 1.4.0
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.12
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v6.5.0
    OS         : OS X El Capitan
    Xcode      : Xcode 8.1 Build version 8B62 
    ios-deploy : 1.9.1 
    ios-sim    : 5.0.13 
    npm        : 3.10.3 

最有用的评论

我今天要开始做这件事。

谢谢,

所有53条评论

团队意识到了这一点。
最后我检查过,这比其他东西的优先级低。
我希望这也能尽快得到解决。

@AmitMY感谢您的回复!!
是的,我也希望如此!! 深度链接会成为这种行为的问题,你不觉得吗?
有没有您知道的解决方法?

我确实认为这是有问题的,我不知道是否存在任何解决方法

我今天要开始做这件事。

谢谢,

非常感谢@danbucholtz
干杯

@tattivitorino谢谢你,你已经问过了,我刚刚在论坛上发布了同样的内容https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

这有什么流程吗?

它已在最新升级中修复,

@拉什克
我确实升级了“npm install [email protected] --save --save-exact”;
还是“ http://localhost :8100/#/nav/n4/start”;

我们在使用 /nav/n4/ 时遇到了同样的问题

Rashnk - 你是说这在 3.5.2 中肯定是固定的吗?

它没有在博客文章中直接解决: http :

是否有修复的更新日志,我们可以在未来检查此类事情?

谢谢 :)

@dev-manager-uk 是的。看这个: https :

太棒了,谢谢你。

我们需要在设置或代码中更改什么吗? 或者它应该 Just Work™。

:D

对我来说,这个问题仍然存在于 3.5.2 和 3.5.3 中。

离子信息

全局包:

@ionic/cli-utils : 1.5.0
Ionic CLI        : 3.5.0

本地包:

@ionic/app-scripts              : 2.0.2
@ionic/cli-plugin-ionic-angular : 1.3.2
Ionic Framework                 : ionic-angular 3.5.3

系统:

Node       : v8.0.0
OS         : macOS Sierra
Xcode      : Xcode 8.3.3 Build version 8E3004b 
ios-deploy : 1.9.0 
ios-sim    : 5.0.9 
npm        : 5.3.0

@rashnk ,我成功升级了。 但问题仍然存在,甚至使用最新版本为延迟加载页面创建一个新项目;

是的。 我错了。 URL 仍然有额外的内容,但我正在使用 ionic serve -l 处理 chrome
好像没问题,看截图
g1
g2

是的,问题是不需要 url。

预期行为:
http://localhost :8100/#/login
http://localhost :8100/#/app/perfil

@danbucholtz我们正在等待您的回复,因此我也有与上面相同的 URL 模式和最新的 Ionic 3.5.3

同样的问题在这里。 升级到 3.5 后,我的应用程序使用深层链接(托管在服务器上的浏览器应用程序)不再按预期工作,因为像“nav/n4”这样的神奇网址。
看起来ionic3.5改变了导航模式,但我希望很快会有详细的文档。
无论如何,感谢 ionic-team 的辛勤工作。

同样的问题在这里。 我们正在开发 PWA 应用程序,深度链接非常重要。

同样在这里。 这阻碍了我们的释放。

@larpo1如果可以的话,我建议你降级,3.5.X 中除了导航之外没有太多变化

大家好! Dan 目前正在致力于缩短我们的 URL 并摆脱其中的许多“魔力”。 我们希望尽快准备好。

谢谢丹! 谢谢贾斯汀!
他们基本上只需要像 Web URL 一样工作

他们应该像这样工作:
https://www.test.com/about

代替:
https://www.test.com/#/nav/n4/about
甚至:
https://www.test.com/#/about

同样在这里。

@dev-manager-uk 关于https://www.test.com/#/about这是另一个主题。

您可以通过更改应用程序模块中的locationStrategy来删除它:

@NgModule({
  imports: [
      BrowserModule,
       IonicModule.forRoot(AppComponent, {
          locationStrategy: "path", // <--- here
      }),
      ...
  ]
})

谢谢@sergiocarneiro
我会试试的!

你好@jgw96
你有一个大约 eta 版本来修复深层链接吗?
谢谢 :-)

我不得不降级以掩盖这个问题:
“npm 安装[email protected] --save --save-exact”

这将在明天发布。 提交已经在 Github 上,所以我要关闭它。

谢谢,

是的,如果有修复就好了

我不确定这是否没有问题,但你们应该每晚使用3.5.3-201707251952 ,它有这个修复程序。 如果有问题,请在发布 3.6 之前发布一个问题

可以确认$ npm install [email protected] --save --save-exact对我有用。 谢谢!

编辑:使用 3.6.0

抱歉,我们遇到了不可预见的问题,明天发货。 如果您想抢先体验,请查看npm install ionic-angular@nightly 。 如果您正在使用选项卡并看到刷新时出现问题,这是我们系统的一个已知限制,它将在 Ionic 4 中通过对 API 的轻微更改得到修复。 同时,您可以在tabUrlPath上使用ion-tab来缓解它。 基本上,如果您有一个深层链接segment和一个tab具有相同的name/title ,那么这里可能存在勾结。 除此之外,到目前为止,一切都运行良好。

谢谢,

@sergiocarneiro不幸的是,添加该设置不会删除nav/n4也无法直接访问该 url。

可以确认 $ npm install [email protected] --save --save-exact 对我

@numerized您可以改用 3.6.0。

你好,
我在 ionic cli v3.9.2 上,但 URL 栏中仍然有 nav/n4。
其实我什至有
/#/nav/n4/pu/loginpage/nav/n5/pr/privatepage
因为我有一个公共和一个私人导航......

我已经过了 3.6.0 所以不确定问题是什么,除非它引起了大问题

您需要使用 3.6.0 离子角。

谢谢 AmitMY,不幸的是它并没有为我修复它......

我还能做什么?

screen shot 2017-09-12 at 4 32 50 pm

同样的事情,我在[email protected],总是同样的问题!!!

除了将 ionic 和 ionic-angular 升级到最新版本之外, @danbucholtz还有其他事情要做吗?
对我来说,它使用最新的

因此,如果我运行 ionc-angular 3.6.1 并执行以下操作:

@NgModule({
  imports: [
      BrowserModule,
       IonicModule.forRoot(AppComponent, {
          locationStrategy: "path", // <--- here
      }),
      ...
  ]
})

这个对我有用

大家好! 自从我创建这个问题以来,似乎发生了很多变化! 我可以看到我们之前遇到的部分 url 问题已修复! 对于不在标签系统内的页面,一切正常! 但标签的情况并非如此。

我刚刚创建了一个新的应用程序,其中包含几个页面,例如登录、注册等……而 url 非常适合这些页面!
http://localhost :8100/#/login
http://localhost :8100/#/signup

当我进入选项卡页面(登录时)时,这就是我所拥有的:

http://localhost :8100/#/tabs/tab1/tab1
在这里,我没有在 IonicPage 上设置段,也没有在 ion-tab 上设置 tabUrlPath

http://localhost :8100/#/tabs/tab-1/tab1
在这里,我在 ion-tab 上设置了 tabUrlPath( )

http://localhost :8100/#/tabs/tab-1/tab-1
在这里我设置了两个
@IonicPage({
段:'tab-1'
})

在我看来,tabUrlPath 与第一个 /tab-1 段相关,而 IonicPage 段是第二个段!

有没有办法摆脱它们中的任何一个? 我看不出有两个部分的意义! 理想的情况是: http://localhost :8100/#/tabs/tab-1,对吗?

那是我的系统信息:

`
cli 包:(/ionicv2/appv3/app/node_modules)

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

全局包:

cordova (Cordova CLI) : 7.0.1

本地包:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : none
Ionic Framework    : ionic-angular 3.6.1

系统:

Android SDK Tools : 25.2.5
ios-deploy        : 1.9.1 
ios-sim           : 5.0.13 
Node              : v6.5.0
npm               : 3.10.3 
OS                : OS X El Capitan
Xcode             : Xcode 8.1 Build version 8B62

`

Ionic 3.9.2 对我来说也是一个问题。 我也像其他人一样使用标签。 如有必要,我会提供更多信息。

我得到一个如下所示的网址: http://localhost:8100/create/nav/n9/create

我完全同意@tattivitorino 的观点,即实际上不需要在 URL 中包含选项卡名称和页面名称。 Imo 选项卡名称应完全替换为页面名称。

我注意到的另一件事是,在使用选项卡时,我无法获取带参数的 URL。
这不起作用:
http://127.0.0.1 :8100/#/tabs/docs/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b
虽然这样做:
http://127.0.0.1 :8100/#/documents/063b38ae-8edd-408b-b7fc-a346b1c16a8b

我想获取的页面具有以下段定义:
segment: "documents/:documentId"

自我之前的评论以来,刚刚使用 3.9.2 进行了升级,它显示 /nav/n4/ 。 删除此内容的任何更新还是我应该降级到 3.6.0?

编辑:忽略这一点,看起来我的 package-lock.json 在 npm 中的问题更多,强制从我的 package.json 安装npm install --no-shrinkwrap似乎可以解决问题并正确安装 3.9.2

我正在运行 3.9.2。 问题仍然存在。

在 3.9.2 上也有这个问题。

例如:/nav/n5/MasterLogin

我让这个工作正常,然后开始制作 /nav/ 路径..也使用 3.9.2 !

我发现问题是因为我在主页中有多个/开关ion-nav (试图显示或不显示离子分裂窗格)

@mariohmol为我解决了这个问题。 感谢您将其包括在内。

感谢您的问题! 此问题已被锁定,以防止发表与原始问题无关的评论。 如果使用最新版本的 Ionic 仍然存在问题,请创建一个新问题并确保模板已完整填写。

此页面是否有帮助?
0 / 5 - 0 等级