web-dev-qa-db-fra.com

Ionic 4 contenu ionique défiler vers le bas

Je crée une page de discussion en utilisant Ionic 4 et j'essaie de la faire défiler automatiquement vers le bas de la page. Je l'ai fait comme ça et ça ne fonctionne pas:

import { IonContent } from "@ionic/angular";

export class ChatroomPage implements OnInit {
    messageForm: FormGroup;
    messages: any[];
    messenger: any;
    @ViewChild(IonContent) content: IonContent;

    constructor(
        private navExtras: NavExtrasService,
        private api: RestApiService,
        private httpNative: HTTP
    ) { }

    ngOnInit() {
        this.content.scrollToBottom(300);
    }
}

Dans le fichier html:

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>Chatroom</ion-title>
            </ion-toolbar>
        </ion-header>

        <!-- display previous message -->
        <ion-content padding id="content"> 

        <ion-list>
            <ion-item *ngFor="let message of messages">
                {{ message.message }}
            </ion-item>
        </ion-list>

        </ion-content>

    <!-- chat message input -->
    <ion-footer>
        <form [formGroup]="messageForm" (submit)="sendMessage()" (keydown.enter)="sendMessage()">
            <ion-input formControlName="message" type="text" placeholder="Enter your message"></ion-input>
            <ion-button type="submit">Send</ion-button>
        </form>
    </ion-footer>

L'erreur affichée est:

ng: ///ChatroomPageModule/ChatroomPage_Host.ngfactory.js: 5 ERREUR TypeError: impossible de lire la propriété 'scrollToBottom' de non défini

Veuillez m'éclairer sur ce que j'ai fait de mal. La plupart des didacticiels que j'ai trouvés utilisent Ionic 3 et ils utilisent Content de ionic-angular au lieu de IonContent de @ionic/angular. Je n'arrive pas à utiliser le contenu dans Ionic 4 car il n'a pas la méthode scrollToBottom.

angulartypescriptionic-frameworkionic4
3
tyn

Vous pouvez atteindre le bas du contenu avec la méthode scrollToBottom () 

scrollToBottom(duration?: number) => Promise<void>

Ajoutez un ID au ion-content

<ion-content #content>
</ion-content>

Obtenez l'ID de contenu en .ts et appelez la méthode scrollToBottom avec une durée choisie

@ViewChild('content') private content: any;

ngOnInit() {
  this.scrollToBottomOnInit();
}

scrollToBottomOnInit() {
  this.content.scrollToBottom(300);
}

https://ionicframework.com/docs/api/content

ÉDITER:

ViewChild obtient les données correctes avec l'ID de contenu fourni

@ViewChild('content') private content: any;

ngOnInit vs ionViewDidEnter/ionViewWillEnter

ngOnInit ne se déclenche pas si vous revenez d'une pile de navigation, ionViewWillEnter/ionViewDidEnter le fera. Donc, si vous placez la fonction dans ngOnInit, le scrollToBottom ne fonctionnera pas si vous revenez en arrière.

5
Tomas Vancoillie

Tomas Vancoillie a raison, mais lorsque vous ajoutez un nouveau texte et ajoutez à la liste, il ne le poussera pas au-dessus du texte d'entrée. Par conséquent, pour pousser le texte vers le tableau et mettre à jour la vue vers le bas, utilisez à nouveau ngZone.

1.

import { Component, ViewChild,NgZone } from '@angular/core';
  1. Dans le constructeur, ajoutez
public _zone: NgZone
  1. Appelez votre fonction
this._zone.run(() => {
  setTimeout(() => {
    this.contentchat.scrollToBottom(300);
  });
});
4
kontashi35

La plupart de votre code est très bien. Vous avez juste besoin de faire 2 changements et cela devrait fonctionner pour vous, dans Ionic 4. Voici les changements:

Modifier 1 (FICHIER HTML):

Remplacer: 

<ion-content padding id="content">

avec: 

<ion-content padding #content>

Changer 2 (FICHIER TS):

Remplacer: 

scrollToBottomOnInit() {
  this.content.scrollToBottom(300);
}

avec: 

scrollToBottomOnInit() {
    setTimeout(() => {
        if (this.content.scrollToBottom) {
            this.content.scrollToBottom(400);
        }
    }, 500);
}

REMARQUE:

Si vous n'importez pas IonContent (comme vous l'avez déjà fait), le code ne parviendra pas à se compiler et vous verrez des erreurs de console telles que celle-ci:

ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'MessagesPageModule' before initialization

où MessagesPageModule est le module associé à la page dans laquelle vous essayez d'implémenter la fonctionnalité.

3
Devner

En raison de changements récents sur ionic 4, j'ai trouvé que le code dans la réponse suggérée ne fonctionne plus pour moi. J'espère que cela aide tous les nouveaux arrivants.

import { IonContent } from '@ionic/angular';

export class IonicPage implements OnInit {
@ViewChild(IonContent, {read: IonContent, static: false}) myContent: IonContent;

  constructor() {}

  ScrollToBottom(){
    setTimeout(() => {
      this.myContent.scrollToBottom(300);
   }, 1000);

  }
}

Aucun identifiant spécifié dans le fichier .html pour <ion-content>

La documentation officielle fait référence à ion-content . Ionic version utilisée listée ci-dessous au moment de cet article.

Ionic CLI                     : 5.4.13
Ionic Framework               : @ionic/angular 4.11.3
@angular/cli                  : 8.1.3
2
Kevin Ng

Cela fonctionne pour moi le décembre 2019.

. html 

<ion-content #content>

</ion-content>

. ts 

@ViewChild('content', { static: false }) content: IonContent;

constructor(){}

 ngOnInit(): void {
    this.scrollToBottom();
  }


 scrollToBottom(): void {
    this.content.scrollToBottom(300);
  }
2
Sampath