Ionic 2: How do you restore @ViewChild if you dismiss the view?
I am creating a chat and the page continues the conversation using the scrollToBottom method from Content on ionic-angular. If I start with "PreChat.html" and go to "Chat.html" then I kill "Chat.html" to go back to "PreChat.html" and go back to "Chat.html". I am getting the following error: "Unable to read property 'scrollToBottom' from null". The experience should be available at any time or several times.
PreChat.html:
<ion-content>
<button (click)="goToChat()" href="#">
Chat
</button>
</ion-content>
PreChat.ts:
import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import { Chat } from '../chat';
@Component({
selector: 'preChat',
templateUrl: 'preChat.html'
})
export class PreChat {
constructor(private modalCtrl: ModalController){}
goToChat(): any {
let profileModal = this.modalCtrl.create(Chat);
profileModal.present();
}
}
Chat.html:
<ion-content>
<button ion-button="filter-button"(click)="dismiss()">
<ion-icon name="close"></ion-icon>
</button>
<div *ngFor="let convo of conversationArray">
<div class="b-text">{{convo.speak}}</div>
</div>
</ion-content>
Chat.ts:
import { Component, ViewChild } from '@angular/core';
import { Content, Events, ViewController } from 'ionic-angular';
@Component({
templateUrl: 'Chat.html'
})
export class Chat {
@ViewChild(Content) content: Content;
conversationArray: any[] = [];
constructor(private events: Events, private viewCtrl: ViewController){
this.events.subscribe('conversation', convo => {
this.conversationArray = convo;
this.content.scrollToBottom();
})
}
dismiss() {
this.viewCtrl.dismiss();
}
}
source to share
To do this, you need to use the ionViewDidEnter
page event instead constructor
.
Fired when the page has been fully entered and is now the active page. This event will fire, whether it is the first load or a cached page.
ionViewDidEnter() : void {
this.platform.ready().then(() => { //platform ready
this.events.subscribe('conversation', convo => {
this.conversationArray = convo;
this.content.scrollToBottom();
})
})
}
source to share