I’m interested in the “approved” way to implement the following. Just getting something to work is easy enough, but my method feels hacky.
Background: I have two tabs, “Quiz” and “History”. In the “Quiz” tab the user presses an “Ask” button. This pulls a question from a database and displays it. Then the user enters an answer and submits. Then the user presses “Ask” again, when they are ready for the next question, and this repeats. The “History” tab is simply an of of questions previously asked. The user can click there, see old questions, and go back to the quiz tab and continue to “Ask”. It works nicely.
Requirement: When the user clicks on a question in the History tab, I want to “replay” the question: simply navigate back to the Quiz tab and display that old question again, as if the “Ask” button was pressed and that question was generated from the database. This is different from just pressing the “quiz” tab button, which starts that tab from scratch. Here we are going back to the quiz tab but with a specific question “preloaded”.
Next, the code. This is the history.page.html:
<ion-list>
<ion-item *ngFor="let q of questions">
<span (click)="replay(q)">
{{q.text}}}
</span>
</ion-item>
</ion-list>
This is the history.page.ts with the replay() function that navigates back to the quiz page:
replay(q: Question) {
this.navCtrl.navigateForward(['/tabs/quiz/'], { state: {question: q} } );
}
Now in the quiz.page.ts, I have
ionViewWillEnter() {
this.question = history.state.question;
}
Everything works but it doesn’t feel clean somehow. Finally my questions.
-
Is this the right way to pass a complex object? I can pass the question ID back and then pull the object again from the database service, but the code is so neat elegant if we just pass whole object. We have the object; we pass it. I just dislike retrieving it from that “history.state” global, that seems horrible somehow.
-
What Angular lifecycle event to use instead of ionViewWillEnter()? My understanding was that the ion hooks are deprecated and we should switch to the Angular hooks. But hooks like ngOnInit() and ngAfterViewInit() are only called once while ngAfterContentChecked() and ngAfterViewChecked() are called way too many times on the same click. None that I tried seem to work as well as ionViewWillEnter().
-
Finally, if I stick with ionViewWillEnter(), what is the best way to determine this is being entered via the the navigateForward() from the history tab, versus it is entering from the quiz tab at the beginning of the app? Again, I can implement something with some state variables, but was hoping for some “official” method to detect “entry” versus “re-entry with a parameter”.
Thanks!