Ionic 3 Lazy 模块中的条件路由页面

Question

我在延迟加载 Ionic 3 应用程序中有 3 个不同的页面 "LoginPage et "VideoPage" 和 "HomePage"。在我的视频页面中，有一个复选框显示："Show this video at the next start" 如果单击该复选框。所以正常的 "routing" 如果我可以这样说，因为它只是将页面推到堆栈的顶部是：

"LoginPage ==> "VideoPage" ==> "HomePage"（选中复选框）

"LoginPage ==> "HomePage"（未点击复选框）

此外，应用程序应该在下次启动时记住选择，即使是稍后（可能使用存储值）。同样在我的登录页面中，已经有一个使用存储的键值逻辑，您将在下面的代码中看到：

（我认为如果 videoPage 可以 @output 一个 event/variable 来告诉登录页面它应该转到主页还是 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: 我把任何代码放在那里是因为它对主题没有帮助（也许我错了告诉我）

Answer 1

这里有一个主要问题是要知道您将在哪里检查用户是否选中了视频的复选框，用户是否始终需要登录？您不会保留任何类型的令牌或任何东西来检查用户是否已经登录或登录是否有效？

如果用户总是需要登录，那么您将检查是否在登录页面中选中了该复选框。您需要保留复选框信息，据我在您的代码中看到的，您已经知道如何使用 Storage，因此请将您的复选框保存在存储中的一个键中，使用事件或 behaviorSubject 或 @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 文件中使用它

Answer 2

如果Next start表示Next app launch并且Video Page是模态的，

在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();
     }
  }
}

Ionic 3 Lazy 模块中的条件路由页面

Conditionnaly routing page in Ionic 3 Lazy module

lazy-loading

typescript

ionic-framework

ionic3

angular