web-dev-qa-db-ja.com

Ionic 4イオンコンテンツを下にスクロール

Ionic 4を使用してチャットページを作成していますが、ページの下部まで自動的にスクロールするようにしています。次のようにしたのですが、機能しません。

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

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>

表示されるエラーは次のとおりです。

ng：///ChatroomPageModule/ChatroomPage_Host.ngfactory.js：5 ERROR TypeError：未定義のプロパティ 'scrollToBottom'を読み取れません

私が間違ったことを教えてください。私が見つけたほとんどのチュートリアルはIonic 3を使用しており、ionic-angularからのContentの代わりに@ionic/angularからのIonContentを使用しています。 Ionic 4のコンテンツを使用するには、scrollToBottomメソッドがないためです。

angulartypescriptionic-frameworkionic4
3
tyn

メソッドscrollToBottom（）でコンテンツの下部に到達できます

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

ion-contentにIDを追加します

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

.tsでコンテンツIDを取得し、選択した期間でscrollToBottomメソッドを呼び出します

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

ngOnInit() {
  this.scrollToBottomOnInit();
}

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

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

編集：

ViewChildは、提供されたコンテンツIDで正しいデータを取得します

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

ngOnInitとionViewDidEnter/ionViewWillEnter

ナビゲーションスタックから戻った場合、ngOnInitはトリガーされません。ionViewWillEnter/ ionViewDidEnterがトリガーします。そのため、関数をngOnInitに配置した場合、戻ると、scrollToBottomは機能しません。

5
Tomas Vancoillie

Tomas Vancoillieは正しいですが、新しいテキストを追加してリストに追加しても、入力テキストの上にプッシュされません。したがって、テキストを配列にプッシュしてビューを最下部に更新するには、ngZoneを使用します。

1。

import { Component, ViewChild,NgZone } from '@angular/core';
  1. コンストラクタに追加
public _zone: NgZone
  1. 関数を呼び出す
this._zone.run(() => {
  setTimeout(() => {
    this.contentchat.scrollToBottom(300);
  });
});
4
kontashi35

ほとんどのコードは問題ありません。 Ionic 4.では、2つの変更を行うだけで機能します。ここに変更があります。

変更1（HTMLファイル）：

置換：

_<ion-content padding id="content">
_

with：

_<ion-content padding #content>
_

変更2（TSファイル）：

置換：

_scrollToBottomOnInit() {
  this.content.scrollToBottom(300);
}
_

with：

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

注：

IonContentをインポートしない場合（すでに行った方法と同様）、コードはコンパイルに失敗し、次のようなコンソールエラーが表示されます。

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

ここで、MessagesPageModuleは、機能を実装しようとしているページに関連付けられているモジュールです。

3
Devner

ionic 4の最近の変更により、提案された回答のコードが機能しないことがわかりました。これがすべての新規参入者に役立つことを願っています。

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);

  }
}

<ion-content>の.htmlファイルにIDが指定されていません

公式ドキュメントは ion-content を参照しています。 Ionicこの投稿の時点で以下にリストされているバージョンが使用されています。

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

これは2019年12月で機能します。

。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