typescript Ionic 4 离子含量滚动到底部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/55116825/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ionic 4 ion-content scroll to bottom
提问by tyn
I am creating a chat page using Ionic 4 and I'm trying to make it automatically scroll to the bottom of the page. I did it like this and it's not working:
我正在使用 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);
}
}
In the html file:
在 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>
The error displayed is:
显示的错误是：
ng:///ChatroomPageModule/ChatroomPage_Host.ngfactory.js:5 ERROR TypeError: Cannot read property 'scrollToBottom' of undefined
ng:///ChatroomPageModule/ChatroomPage_Host.ngfactory.js:5 错误类型错误：无法读取未定义的属性“scrollToBottom”
Please enlighten me what did I do wrong. Most tutorials I found are using Ionic 3 and they use Contentfrom ionic-angularinstead of IonContentfrom @ionic/angular. I cannot seem to use Content in Ionic 4 as it doesn't have the scrollToBottom method.
请赐教我做错了什么。我发现的大多数教程都使用 Ionic 3，它们使用Contentfromionic-angular而不是IonContentfrom @ionic/angular。我似乎无法在 Ionic 4 中使用 Content，因为它没有 scrollToBottom 方法。
回答by Tomas Vancoillie
You can reach the bottom of the content with the method scrollToBottom()
您可以使用方法scrollToBottom()到达内容的底部
scrollToBottom(duration?: number) => Promise<void>
Add an ID to the ion-content
将 ID 添加到 ion-content
<ion-content #content>
</ion-content>
Get the content ID in .ts and call the scrollToBottom method with a chosen duration
获取 .ts 中的内容 ID 并使用选定的持续时间调用 scrollToBottom 方法
@ViewChild('content') private content: any;
ngOnInit() {
this.scrollToBottomOnInit();
}
scrollToBottomOnInit() {
this.content.scrollToBottom(300);
}
https://ionicframework.com/docs/api/content
https://ionicframework.com/docs/api/content
EDIT:
编辑：
ViewChild gets the correct data with the provided content ID
ViewChild 使用提供的内容 ID 获取正确的数据
@ViewChild('content') private content: any;
ngOnInit vs ionViewDidEnter / ionViewWillEnter
ngOnInit 与 ionViewDidEnter / ionViewWillEnter
ngOnInit doesn't trigger if you come back from a navigation stack, ionViewWillEnter / ionViewDidEnter will. So if you place the function in ngOnInit, the scrollToBottom won't work if you navigate back.
如果您从导航堆栈返回， ngOnInit 不会触发， ionViewWillEnter / ionViewDidEnter 会。因此，如果您将函数放在 ngOnInit 中，则如果您返回，则 scrollToBottom 将不起作用。
回答by Devner
Most of your code is fine. You just need to do 2 changes and that should work for you, in Ionic 4. Here are the changes:
你的大部分代码都很好。在 Ionic 4 中，您只需要进行 2 处更改，这应该对您有用。以下是更改：
Change 1 (HTML FILE):
更改 1（HTML 文件）：
Replace:
代替：
<ion-content padding id="content">
with:
和：
<ion-content padding #content>
Change 2 (TS FILE):
更改 2（TS 文件）：
Replace:
代替：
scrollToBottomOnInit() {
this.content.scrollToBottom(300);
}
with:
和：
scrollToBottomOnInit() {
setTimeout(() => {
if (this.content.scrollToBottom) {
this.content.scrollToBottom(400);
}
}, 500);
}
NOTE:
笔记：
If you do not import IonContent(similar to the way you already did), the code will fail to compile and you will see console errors such as this:
如果您不导入IonContent（类似于您已经执行的方式），代码将无法编译，您将看到如下控制台错误：
ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'MessagesPageModule' before initialization
ERROR Error: Uncaught (in promise): ReferenceError: Cannot access 'MessagesPageModule' before initialization
where MessagesPageModuleis the Module associated with the page that you are trying to implement the feature in.
MessagesPageModule与您尝试在其中实现该功能的页面关联的模块在哪里。
回答by kontashi35
Tomas Vancoillie is right, but when you add new text and add to list, it won't push it up above input text. Therefore to push text to array and update view to bottom again use ngZone.
Tomas Vancoillie 是对的，但是当您添加新文本并添加到列表时，它不会将其推到输入文本上方。因此，要将文本推送到数组并将视图更新到底部，请再次使用 ngZone。
1.
1.
import { Component, ViewChild,NgZone } from '@angular/core';
- In constructor add
- 在构造函数中添加
public _zone: NgZone
- Call your function
- 调用你的函数
this._zone.run(() => {
setTimeout(() => {
this.contentchat.scrollToBottom(300);
});
});
回答by Kevin Ng
Due to recent changes on ionic 4, I found the code in suggested answer no longer works for me. Hope this helps all the new comers.
由于最近对 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);
}
}
No id specified in .html file for < ion-content >
在 .html 文件中没有为 < ion-content > 指定 id
Official documentation refers to ion-content. Ionic version used listed below at the time of this post.
官方文档是指ion-content。发布本文时使用的离子版本如下所示。
Ionic CLI : 5.4.13 Ionic Framework : @ionic/angular 4.11.3 @angular/cli : 8.1.3
Ionic CLI : 5.4.13 Ionic Framework : @ionic/angular 4.11.3 @angular/cli : 8.1.3
回答by Sampath
This works for me on December 2019.
这在2019年12 月对我有用。
.html
.html
<ion-content #content>
</ion-content>
.ts
.ts
@ViewChild('content', { static: false }) content: IonContent;
constructor(){}
ngOnInit(): void {
this.scrollToBottom();
}
scrollToBottom(): void {
this.content.scrollToBottom(300);
}
