angular - Ionic 4 ion-content 滚动到底部

Question

我正在使用 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: Cannot read property 'scrollToBottom' of undefined

请赐教我做错了什么。我发现的大多数教程都使用 Ionic 3，他们使用 Content来自 ionic-angular而不是 IonContent来自 @ionic/angular .我似乎无法在 Ionic 4 中使用 Content，因为它没有 scrollToBottom 方法。

Answer 1

您可以使用方法 到达内容底部scrollToBottom()

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

将 ID 添加到 ion-content

<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 将不起作用。