Условная маршрутизация страницы в модуле Ionic 3 Lazy - PullRequest
Новая
       16

Условная маршрутизация страницы в модуле Ionic 3 Lazy

0 голосов
/ 13 июня 2018

У меня есть страница с 3 разными страницами в загружаемом приложении Ionic 3 "LoginPage et" VideoPage "и" HomePage ". На моей странице видео есть флажок, который говорит:" Показать это видео при следующем запуске ", если флажок установленщелкнул. Таким образом, нормальная «маршрутизация», если можно так сказать, потому что это просто толчок страниц сверху стека:

"LoginPage ==>" VideoPage "==>" HomePage " (флажок установлен)

"LoginPage ==>" HomePage " (флажок не установлен)

Также приложение должно запомнить выбор при следующем запуске дажеесли это будет позже (возможно, с использованием значения хранилища). Также на моей странице входа есть логика значения ключа, использующая хранилище, вы уже увидите это в коде ниже:

(я думаю, что это можетбыло бы возможно, если videoPage мог бы @output событие / переменная, чтобы сообщить странице входа в систему, должна ли она перейти на homePage или videoPage..Я ищу это таким образом ..)

PS: Если у вас есть какие-либо вопросы или предложения, не стесняйтесь спрашивать

login.html: 

   <ion-item no-lines>
      <ion-label floating>Password</ion-label>
      <ion-input type="password"></ion-input>
    </ion-item>

    <button class="charlotte-button" ion-button icon-left (click)="login()">
      <ion-icon class="picto picto-checkbox-active-w"></ion-icon>
      Login
    </button>

login.ts: 

 export class LoginPage {  public password: string = '';
   public key: string = 'username'; 

   constructor(
    public navCtrl: NavController, public storage: Storage, private alertCtrl:  
   AlertController ) 

  login() {
     if (this.password === this.key) {
      this.storage
    .set(this.key, this.password)
    .then(val => this.navCtrl.setRoot('LoginPage'));
    } else {
      let alert = this.alertCtrl.create({
    title: 'Wrong password try again !',
    buttons: ['Dissmiss']
   });
  alert.present();
}
}
}

video.html: 

  <div class="video-container">
  <video controls>
   <source    src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_ 
 surround.mp4" 
          poster="https://peach.blender.org/wp- 
   content/uploads/title_anouncement.jpg?x11217"
          type="video/mp4">
   </video>
  <div class="video-title">Tutorial</div>
  </div>

  <ion-item no-lines class="checkbox-container">
<ion-label class="diLabel">Show this video at the next start</ion-label>
<ion-checkbox [(ngModel)]="disableVideo"></ion-checkbox>
</ion-item>

video.ts: (это действительното, что я пытаюсь и не работает вообще) 

export class VideoPage { 

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

 checkClicked() {

if(this.disableVideo) {
  this.navCtrl.setRoot('VideoPage')
 }
   else() => {
  this.navCtrl.setRoot('Homepage')
   }
 }
 }

home.html: home.ts: я помещаю туда любой код, потому что он не помогает предмету (возможно, я ошибаюсь, скажите мне)

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Если Следующий запуск означает Следующий запуск приложения и Страница видео является модальной,

В video.ts 

export class VideoPage { 

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

  checkClicked() {
    if(this.disableVideo) {
      this.storage.set('showVideo',false)
    }
    else() => {
      this.storage.set('showVideo',true)
    }
  }
}

В login.ts 

export class LoginPage {  public password: string = '';
  public key: string = 'username'; 

  constructor(
    public navCtrl: NavController, public storage: Storage, private alertCtrl:AlertController, public modalCtrl:ModalController) {}

  login() {
     if (this.password === this.key) {
       // skip the storing password and etc.
       this.storage.get('showVideo').then((showVideo) => {
          if(showVideo){
            let modal = this.modalCtrl.create('VideoPage');
            modal.onDidDismiss(data => { // Or onWillDismiss
              this.navCtrl.setRoot('HomePage'))
            });
            modal.present()
          }else{
            this.navCtrl.setRoot('HomePage'))
          }
       }).catch(()=>{
         this.navCtrl.setRoot('HomePage'))
       });
     }else{
       let alert = this.alertCtrl.create({
         title: 'Wrong password try again !',
         buttons: ['Dissmiss']
       });
       alert.present();
     }
  }
}
0 голосов
/ 13 июня 2018

В этом главный вопрос, чтобы знать, где вы проверите, если пользователь установил флажок на видео, ему всегда нужно будет входить в систему?Вы не будете сохранять какой-либо токен или что-либо еще, чтобы проверить, вошел ли пользователь уже в систему или логин действителен?

Если пользователю всегда нужно войти в систему, то вы проверите, был ли установлен флажокна странице входа.Вам нужно будет сохранить информацию о флажке, вы уже знаете, как использовать хранилище, насколько я вижу в вашем коде, поэтому сохраняйте флажок в ключе в вашем хранилище, используя событие или поведение_Subject, иначе @output не будет работать какожидается, потому что пользователь никогда не сохранял свои предпочтения при показе или не отображении страницы видео, поэтому сделайте что-то вроде этого:

video.html: 

<ion-item no-lines class="checkbox-container">
  <ion-label class="diLabel">Show this video at the next start</ion-label>
  <!-- just check if it's (change) event or (ionChange) in the checkbox docs -->
  <ion-checkbox [(ngModel)]="disableVideo" (change)="changeCheckbox()"></ion-checkbox>
</ion-item>

video.ts 

export class VideoPage { 
  public disableVideo: boolean = false;
  // import storage
  constructor(public navCtrl: NavController, public navParams: NavParams, public storage: Storage) {
    storage.get('yourCheckboxStatus').then(check => this.disableVideo = check);
  }

  // let's keep the checkbox status always updated
  changeCheckbox = () => this.storage.set('yourCheckboxStatus', this.disableVideo);

  // don't know what this does, you're already in your video page, you don't need to check and send it to VideoPage again.
  checkClicked() {
    if(this.disableVideo) {
      this.navCtrl.setRoot('VideoPage')
    } else => {
      this.navCtrl.setRoot('AcceuilPage')
    }
  }
}

Затем на странице входа в систему вам нужно будет сделать это, когда пользователь войдет в систему: 

login() {
  if (this.password === this.key) {
    this.storage
      .set(this.key, this.password)
      .then(val => {
        this.storage.get('yourCheckboxStatus').then(check => {
          if(check) this.navCtrl.setRoot('VideoPage')
          else this.navCtrl.setRoot('HomePage');
        });
      });
  } else {
    this.alertCtrl.create({
      title: 'Wrong password try again !',
      buttons: ['Dissmiss']
    }).present();
  }
}

Если пользователю не нужно будет каждый раз входить в систему или вы хотите проверить это при инициализации приложенияВы можете использовать его в своем app.components файле

...