Ionic-framework: سلوك عناوين URL الغريبة 3.5.0 Ionic "nav / n4" و "tabs / t0 / page"

تم إنشاؤها على ١٣ يوليو ٢٠١٧ · 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] تقرير الشوائب
[ ] طلب المواصفات
[] support request => الرجاء عدم إرسال طلبات الدعم هنا ، استخدم إحدى هذه القنوات: https://forum.ionicframework.com/ أو http://ionicworldwide.herokuapp.com/

السلوك الحالي:

3.5.0 Ionic سلوك URL غريب
يحتوي تطبيقي على الواجهات الأساسية! صفحة تسجيل الدخول ، صفحة SignupPage ... بعد تسجيل الدخول أو التسجيل تنتقل إلى واجهة علامات التبويب .. لا شيء خيالي على ما أعتقد!
أولا وقبل كل شيء "nav / n4" هو السلوك الافتراضي؟
http: // localhost : 8100 / # / nav / n4 / تسجيل الدخول
http: // localhost : 8100 / # / nav / n4 / app / tabs / t0 / perfil / perfil

لقد أنشأت الصفحات وعلامات التبويب باستخدام g
ولجميع الصفحات التي لديّ بها المقطع الذي تم تعيينه لأسماءهم ، دعنا نقول ، مثل:
IonicPage ({section: 'perfil'})

سلوك متوقع:

http: // localhost : 8100 / # / تسجيل الدخول
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');
  }

}

معلومات أخرى:

المعلومات الأيونية: (قم بتشغيل ionic info من موجه Terminal / cmd والصق الإخراج أدناه):

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

مصدر

tattivitorino

👍6

التعليق الأكثر فائدة

سأبدأ العمل على هذا اليوم.

شكرا،
دان

danbucholtz في ١٣ يوليو ٢٠١٧

👍18

ال 53 كومينتر

الفريق على علم بذلك.
راجعت آخر مرة ، كان هذا على أولوية أقل من الأشياء الأخرى.
آمل أن يتم معالجة هذا قريبًا أيضًا.

AmitMY في ١٣ يوليو ٢٠١٧

AmitMY شكرا على الرد !!
نعم أتمنى ذلك أيضًا !! سيكون الارتباط العميق مشكلة في هذا السلوك ، ألا تعتقد ذلك؟
هل هناك أي حل بديل تعرفه؟

tattivitorino في ١٣ يوليو ٢٠١٧

أعتقد أنه يمثل مشكلة ، ولا أعرف ما إذا كان هناك أي حل بديل

AmitMY في ١٣ يوليو ٢٠١٧

سأبدأ العمل على هذا اليوم.

شكرا،
دان

danbucholtz في ١٣ يوليو ٢٠١٧

👍18

شكرا جزيلا danbucholtz
في صحتك

tattivitorino في ١٣ يوليو ٢٠١٧

tattivitorino شكرًا لك ، لقد طلبت هذا بالفعل ، لقد نشرت للتو نفس الشيء على المنتدى https://forum.ionicframework.com/t/url-not-reset-on-ionic-serve-live-reload/98080

rashnk في ١٣ يوليو ٢٠١٧

👍1

أي عملية لهذا؟

vellengs في ١٦ يوليو ٢٠١٧

تم إصلاحه في أحدث ترقية ،

rashnk في ١٦ يوليو ٢٠١٧

تضمين التغريدة
فعلت ترقية "الآلية الوقائية الوطنية تثبيت [email protected] --save --save-الدقيق".
لا يزال " http: // localhost : 8100 / # / nav / n4 / start" ؛

vellengs في ١٦ يوليو ٢٠١٧

👍1

اتبع هذا http://blog.ionic.io/announcing-ionic-3-5-2/

rashnk في ١٦ يوليو ٢٠١٧

نواجه نفس المشكلة مع / nav / n4 /

راشنك - هل تقول أن هذا تم إصلاحه بالتأكيد في 3.5.2؟

لم يتم تناولها مباشرة في منشور المدونة على: http://blog.ionic.io/announcing-ionic-3-5-2/

هل هناك تغيير في الإصلاحات يمكننا التحقق من هذا النوع من الأشياء في المستقبل؟

شكرا :)

dev-manager-uk في ١٦ يوليو ٢٠١٧

@ dev-manager-uk نعم ، شاهد هذا: https://github.com/ionic-team/ionic/releases

Sampath-Lokuge في ١٦ يوليو ٢٠١٧

👍1

رائع شكرا لك.

هل هناك أي شيء نحتاج إلى تغييره في الإعدادات أو التعليمات البرمجية؟ أو يجب أن تعمل فقط ™.

:د

dev-manager-uk في ١٦ يوليو ٢٠١٧

المشكلة لا تزال موجودة في كل من 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

pklime2 في ١٦ يوليو ٢٠١٧

👍1

rashnk ، لقد تمت ترقية النجاح. لكن المشكلة لا تزال قائمة ، حتى إنشاء مشروع جديد لصفحة التحميل البطيئة باستخدام الإصدار الأخير ؛

vellengs في ١٧ يوليو ٢٠١٧

نعم فعلا. كنت مخطئا. لا يزال عنوان URL يحتوي على محتويات إضافية ، لكنني كنت أعمل على chrome مع خدمة أيونية -l
لا يبدو أنها مشكلة ، تحقق من لقطات الشاشة

rashnk في ١٧ يوليو ٢٠١٧

نعم ، المشكلة هي عنوان url غير متوقع.

سلوك متوقع:
http: // localhost : 8100 / # / تسجيل الدخول
http: // localhost : 8100 / # / app / perfil

vellengs في ١٧ يوليو ٢٠١٧

danbucholtz @ نحن في انتظار ردك ومن ثم لدي أيضًا نفس نمط عنوان URL كما هو مذكور أعلاه مع أحدث Ionic 3.5.3

Sampath-Lokuge في ١٧ يوليو ٢٠١٧

👍3

نفس المشكلة هنا. بعد الترقية إلى الإصدار 3.5 ، لم يعد تطبيقي الذي يستخدم الارتباط العميق (تطبيق متصفح مستضاف على الخادم) يعمل كما هو متوقع بسبب عناوين url السحرية مثل 'nav / n4'.
يبدو أن ionic3.5 قد غير نمط التنقل ، لكنني آمل أن يكون هناك توثيق تفصيلي قريبًا.
على أي حال ، شكرًا على العمل الشاق لفريق الأيونات.

agasbzj في ١٨ يوليو ٢٠١٧

نفس المشكلة هنا. نحن نعمل على تطبيق PWA والربط العميق مهم جدًا.

Danielv3 في ١٨ يوليو ٢٠١٧

👎1 👍1

كذلك هنا. هذا يعيق إطلاق سراحنا.

larpo1 في ١٨ يوليو ٢٠١٧

👎1

@ larpo1 ، أقترح عليك الرجوع إلى إصدار أقدم إذا استطعت ، لم تكن هناك تغييرات كثيرة بخلاف التنقل في 3.5.X

AmitMY في ١٨ يوليو ٢٠١٧

اهلا جميعا! يعمل دان حاليًا على تقصير عناوين URL الخاصة بنا والتخلص من الكثير من "السحر" فيها. نأمل أن يكون هذا جاهزًا قريبًا.

jgw96 في ١٨ يوليو ٢٠١٧

👍11 🎉2

شكرا دان! شكرا جاستن!
إنهم يحتاجون أساسًا إلى العمل مثل عناوين URL على الويب

يجب أن يعملوا مثل:
https://www.test.com/about

بدلا من:
https://www.test.com/#/nav/n4/about
او حتى:
https://www.test.com/#/about

dev-manager-uk في ١٨ يوليو ٢٠١٧

👍16 🎉1

كذلك هنا.

Natanael1234 في ٢١ يوليو ٢٠١٧

@ dev-manager-uk بخصوص https://www.test.com/#/about فهذا موضوع آخر.

يمكنك إزالته عن طريق تغيير locationStrategy في وحدة التطبيق:

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

sergiocarneiro في ٢٤ يوليو ٢٠١٧

👍3

شكرا لك sergiocarneiro
سأجرب ذلك!

dev-manager-uk في ٢٥ يوليو ٢٠١٧

مرحبًا بكم @ jgw96
هل لديك إصدار تقريبي للإصدار لإصلاح الارتباط العميق؟
شكرا :-)

dev-manager-uk في ٢٥ يوليو ٢٠١٧

👍1

اضطررت إلى تخفيض التصنيف لتمويه هذه المشكلة:
"الآلية الوقائية الوطنية تثبيت [email protected] --save --save-الدقيق"

NiltonMorais في ٢٦ يوليو ٢٠١٧

سيتم نشر هذا غدا. الالتزامات موجودة بالفعل على Github لذا سأغلق هذا.

شكرا،
دان

danbucholtz في ٢٦ يوليو ٢٠١٧

👍9 🎉4 ❤1

نعم ، سيكون من الجيد أن يكون لديك إصلاح

kirillgroshkov في ٢٦ يوليو ٢٠١٧

لست متأكدًا مما إذا كان هذا لا يحتوي على مشكلات ، ولكن يجب على الأشخاص استخدام السعر الليلي ، 3.5.3-201707251952 ، الذي يحتوي على هذا الإصلاح. وإذا كانت هناك مشاكل في ذلك ، فالرجاء نشر مشكلة قبل إصدار 3.6

AmitMY في ٢٦ يوليو ٢٠١٧

👍2

يمكن أن أؤكد أن $ npm install [email protected] --save --save-exact يعمل بالنسبة لي. شكرا!

تحرير: استخدم 3.6.0

reggaedit في ٢٦ يوليو ٢٠١٧

👍1

عذرًا ، كانت لدينا مشكلة غير متوقعة وسنقوم بالشحن غدًا. إذا كنت تريد الوصول المبكر ، فتحقق من npm install ionic-angular@nightly . إذا كنت تستخدم علامات التبويب ورأيت الأشياء تتعطل عند التحديث ، فهذا أحد القيود المعروفة لنظامنا الذي سيتم إصلاحه في Ionic 4 مع تغيير طفيف في واجهة برمجة التطبيقات. في غضون ذلك ، يمكنك استخدام tabUrlPath على ion-tab لتخفيفه. بشكل أساسي ، إذا كان لديك رابط عميق segment و tab بنفس name/title ، فمن المحتمل أن يكون هناك تواطؤ هنا. بخلاف ذلك ، كل شيء يعمل بذهول حتى الآن.

شكرا،
دان

danbucholtz في ٢٦ يوليو ٢٠١٧

👍1

sergiocarneiro لسوء الحظ ، لن تؤدي إضافة هذا الإعداد إلى إزالة nav/n4 ولن تتمكن من الوصول إلى عنوان url هذا مباشرة.

glebinsky في ٨ أغسطس ٢٠١٧

يمكن تأكيد تثبيت $ npm [email protected] - حفظ - حفظ الأعمال بالضبط بالنسبة لي. شكرا!

numerized في ٩ أغسطس ٢٠١٧

numerized يمكنك استخدام 3.6.0 بدلاً من ذلك.

AmitMY في ٩ أغسطس ٢٠١٧

أهلا،
أنا على cli v3.9.2 الأيوني وما زلت أمتلك nav / n4 في شريط url.
في الواقع لدي
/ # / nav / n4 / pu / loginpage / nav / n5 / pr / privatepage
حيث لدي ملاحه عامه وخاصه ...

تجاوزت 3.6.0 ، لذا لست متأكدًا من المشكلة ، إلا أنها تسبب مشكلات كبيرة

summerchill في ١٢ سبتمبر ٢٠١٧

تحتاج إلى استخدام 3.6.0 الزاوية الأيونية.

AmitMY في ١٢ سبتمبر ٢٠١٧

شكرًا AmitMY ، للأسف لا يصلح الأمر بالنسبة لي ...

summerchill في ١٢ سبتمبر ٢٠١٧

ماذا يمكنني أن أفعل غير ذلك؟

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

summerchill في ١٢ سبتمبر ٢٠١٧

نفس الشيء هنا ، أنا على [email protected] ودائمًا نفس المشكلة !!!

lud42 في ١٥ سبتمبر ٢٠١٧

بخلاف ترقية الزاوية الأيونية والأيونية إلى الأحدث ، @ danbucholtz هل هناك شيء آخر يجب القيام به؟
بالنسبة لي يعمل باستخدام الأحدث

AmitMY في ١٥ سبتمبر ٢٠١٧

لذلك إذا قمت بتشغيل ionc-angular 3.6.1 وقمت بما يلي:

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

إنه يعمل بالنسبة لي

tskweres في ١٨ سبتمبر ٢٠١٧

👍1

مرحبا بكم جميعا! يبدو أن الكثير قد حدث وتغير منذ أن صنعت هذه المشكلة! أستطيع أن أرى أن جزءًا من مشكلات url التي واجهناها من قبل قد تم إصلاحها! بالنسبة للصفحات غير الموجودة داخل نظام علامات التبويب ، كل شيء يعمل بشكل جيد! ولكن هذا ليس هو الحال مع علامات التبويب.

لقد قمت للتو بإنشاء تطبيق جديد مكون من صفحتين مثل تسجيل الدخول والاشتراك وما إلى ذلك .. وعنوان url مثالي لهؤلاء!
http: // localhost : 8100 / # / تسجيل الدخول
http: // localhost : 8100 / # / تسجيل

عندما أصل إلى صفحة علامات التبويب (عند تسجيل الدخول) هذا ما لدي:

http: // localhost : 8100 / # / tabs / tab1 / tab1
هنا لم أقم بإعداد المقطع على IonicPage ولا tabUrlPath في علامة التبويب ion

http: // localhost : 8100 / # / tabs / tab-1 / tab1
هنا أقوم بإعداد tabUrlPath في علامة التبويب ion ( )

http: // localhost : 8100 / # / tabs / tab-1 / tab-1
هنا أقوم بإعداد كليهما
IonicPage ({
المقطع: "علامة التبويب -1"
})

يبدو لي أن tabUrlPath مرتبطة بالمقطع الأول / علامة التبويب 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

tattivitorino في ٢٥ سبتمبر ٢٠١٧

👍3

بالتأكيد مشكلة بالنسبة لي أيضًا مع Ionic 3.9.2. أنا أستخدم أيضًا علامات تبويب أخرى. سأقدم المزيد من المعلومات إذا لزم الأمر.

أحصل على عنوان url يشبه ما يلي: http://localhost:8100/create/nav/n9/create .

lostdev في ٢٦ سبتمبر ٢٠١٧

أنا أتفق تمامًا مع 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"

felschr في ٩ أكتوبر ٢٠١٧

👍1

لقد أجريت للتو ترقية منذ تعليقي السابق ، باستخدام 3.9.2 وهو يظهر / nav / n4 /. هل هناك أي تحديثات لإزالة هذا أم يجب الرجوع إلى الإصدار 3.6.0؟

تحرير: تجاهل هذا، يبدو كما لو كان أكثر من مشكلة مع بلدي حزمة lock.json في الآلية الوقائية الوطنية، مما اضطر تثبيت من وجهة نظري package.json مع npm install --no-shrinkwrap بدا أن تفعل خدعة وتثبيت 3.9.2 بشكل صحيح

reggaedit في ٢٢ يناير ٢٠١٨

أعمل 3.9.2. استمرت المشكلة.

AlexanderBrese في ٢١ فبراير ٢٠١٨

👍3

وجود هذه المشكلة أيضًا في 3.9.2.

على سبيل المثال: / nav / n5 / MasterLogin

TGibsonn في ٣١ مايو ٢٠١٨

لقد كان هذا يعمل بشكل طبيعي ثم بدأت في جعل / nav / path .. باستخدام 3.9.2 أيضًا!

اكتشفت أن المشكلة كانت بسبب وجود أكثر من مفتاح واحد / مفتاح ion-nav في الصفحة الرئيسية (كنت أحاول إظهار جزء أيوني أو بدونه)

mariohmol في ١٠ يونيو ٢٠١٨

🎉1

mariohmol الذي حل المشكلة بالنسبة لي. شكرا لتضمين ذلك.

TGibsonn في ١١ يونيو ٢٠١٨

👍1

شكرا على القضية! تم قفل هذه المشكلة لمنع التعليقات غير ذات الصلة بالمشكلة الأصلية. إذا استمرت المشكلة في أحدث إصدار من Ionic ، فيرجى إنشاء مشكلة جديدة والتأكد من ملء النموذج بالكامل.