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

Question

我在延迟加载 Ionic 3 应用程序“LoginPage 等”VideoPage”和“HomePage”中有 3 个不同的页面。

在我的视频页面中有一个复选框，如果单击该复选框，则显示：“在下次开始时显示此视频”。

所以正常的“路由”，如果我可以这么说的话，因为它只是将页面推送到堆栈顶部：

"LoginPage ==> "VideoPage" ==> "HomePage" (checkbox clicked)

"LoginPage ==> "HomePage" (checkbox not clicked)

应用程序还应该记住下次启动时的选择，即使是稍后一段时间（也许使用存储值）。

此外，在我的登录页面中，已经有一个使用存储的键值逻辑，您将在此处显示的代码中看到：

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

PS：如果您有任何问题或建议，请随时询问

登录.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>

登录.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: ['Dismiss']
   });
  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_announcement.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

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

如果用户始终需要登录，那么您将检查登录页面中的复选框是否已选中。您需要保留复选框信息，据我在代码中所见，您已经知道如何使用存储，因此将复选框保存在存储中的键中，使用事件或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>

视频.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();
     }
  }
}