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

Question

我在延迟加载 Ionic 3 应用程序“LoginPage et “VideoPage”和“HomePage”中有 3 个不同的页面。 在我的视频页面中有一个复选框，如果单击该复选框，则显示：“在下次开始时显示此视频”。 因此，如果我可以这样说，因为它只是将页面推送到堆栈顶部，那么正常的“路由”是：

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

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

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

（我认为如果 videoPage 可以@output 一个事件/变量来告诉登录页面它应该转到主页还是到 videoPage..我正在这样搜索它......） em>

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')
   }
 }
 }

主页.html： home.ts: 我在那里放了任何代码，因为它对主题没有帮助（也许我错了告诉我）

Answer 1

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

如果用户总是需要登录，那么您将检查登录页面中的复选框是否被选中。您需要保留复选框信息，就我在您的代码中看到的而言，您已经知道如何使用存储，因此将复选框保存在存储中的键中，使用事件或行为主题或 @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();
     }
  }
}