Angular 离子4离子含量滚动至底部

我正在使用Ionic 4创建一个聊天页面，并试图使其自动滚动到页面底部。我是这样做的，但它不起作用：

从“@ionic/angular”导入{IonContent}；
导出类聊天室页面实现OnInit{
messageForm:FormGroup；
信息：任何[]；
信使：任何；
@ViewChild（IonContent）内容：IonContent；
建造师(
私人导航服务：导航服务，
私有api:RestApiService，
私有httpNative:HTTP
) { }
恩戈尼尼特（）{
这个.content.scrolltobttom（300）；
}
}

在html文件中：

聊天室
{{message.message}}
发送

显示的错误为：

ng:///ChatroomPageModule/ChatroomPage_Host.ngfactory.js:5错误类型错误：无法读取未定义的属性“scrollToBottom”

---

请告诉我我做错了什么。我发现的大多数教程都使用了Ionic 3，它们使用了

Ionic angular

中的

Content

而不是

@Ionic/angular

中的

Ionic Content

。我似乎无法在Ionic 4中使用内容，因为它没有scrollToBottom方法。

您可以使用scrollToBottom（）方法到达内容的底部。

在.ts中获取内容ID，并使用选定的持续时间调用scrollToBottom方法

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

ngOnInit() {
  this.scrollToBottomOnInit();
}

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

编辑： ViewChild使用提供的内容ID获取正确的数据

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

ngOnInit vs ionViewDidEnter/ionViewWillEnter

---

ngOnInit不会触发如果您从导航堆栈返回，ionViewWillEnter/ionViewDidEnter将触发。因此，如果您将函数放在ngOnInit中，如果您向后导航，scrollToBottom将不起作用。

Tomas Vancoillie是正确的，但当您添加新文本并添加到列表中时，它不会将其推到输入文本上方。因此，要将文本推送到数组并再次将视图更新到底部，请使用ngZone

一,

从'@angular/core'导入{Component，ViewChild，NgZone}；

在构造函数中添加

public\u区域：NgZone

调用你的函数

this.\u zone.run（（）=>{
设置超时（（）=>{
this.contentchat.scrolltobttom（300）；
});
}); 

您的大部分代码都很好。你只需要做2个改变，这应该对你有用，在Ionic 4中。以下是变化：

更改1（HTML文件）：

替换：

与：

更改2（TS文件）：

替换：

ScrollToBottoMonini（）{
这个.content.scrolltobttom（300）；
}

与：

ScrollToBottoMonini（）{
设置超时（（）=>{
if（this.content.scrollToBottom）{
这个.content.scrollToBottom（400）；
}
}, 500);
}

注意：

如果您不导入

IonContent

（类似于您已经导入的方式），代码将无法编译，您将看到控制台错误，例如：

错误错误：未捕获（承诺中）：引用错误：无法在初始化之前访问“MessagesPageModule”

---

其中，

MessagesPageModule

是与您试图在其中实现该功能的页面相关联的模块。

这在2019年12月对我有效

.html

---

由于最近离子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);

  }
}

在.html文件中没有为

正式文件是指。 在本文发表时，下面列出了使用的爱奥尼亚版本

---

这终于对我起作用了。你可以试试看

.ts

/。。类声明/

---

检查后执行的最小功能 2020年10月30日第9次会议

进口

从'@angular/core'导入{Component，OnInit，ViewChild，AfterViewChecked}

从'@ionic/angular'导入{IonContent}

机具后视检查

export class PublicationsProductPage在查看检查后实现{

克里尔·厄尔梅托多卷轴底部

scrollToBottom（）{this.content.scrollToBottom（）；}

Llamar el-metodo Scroll Tobottom desde la implementación de afterview检查

ngAfterViewChecked（）{this.scrollToBottom（）；}

最后一次会议将于本月举行

@ViewChild(IonContent) content: IonContent;
scrollToBottom() {
    setTimeout(() => {
      if (this.content.scrollToBottom) {
        this.content.scrollToBottom();
      }
    }, 400);
  }

功能使用中的任意位置：

this.scrollToBottom();

---

因此，您的实现是正确的。IonContent导入是不必要的，您可以在不导入IonContent的情况下获取内容ID。我已将代码从导入IonContent更改为内容ID。起初它不起作用，但我尝试调用

this.ScrollToBottoMonini（）

inside

IonViewDiCenter（）

现在可以正常工作了。我想这可能是调用

this.scrollToBottoMonini（）引起的

在加载消息之前，良好的调用。如果您从导航堆栈返回，则不会触发Ngonint，ionViewWillEnter/ionViewDidEnter将触发。也许您也可以在订阅接收到的数据后调用scrollToBottom方法。因此，当您的数据进入时，scrollToBottom将被激活。尚未尝试，只是一个建议o try；）啊，是的，我也应该把它用于订阅的数据。谢谢提醒。我想你可以编辑你的答案，我会接受的。注意：添加一些延迟可能会使它工作。例如：

setTimeout（（）=>{this.scrollToBottominit（）；}，200）

有效，确认2020年。2月这

设置超时

修复了一个计时问题。我在

离子内容中添加了一个元素，然后向下滚动。但是该元素是在向下滚动事件之后添加的。

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

constructor(){}

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


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

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

  }
}

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

import { Component, OnInit, ViewChild, NgZone } from '@angular/core';

@ViewChild('content') content : IonContent;

constructor(public _zone: NgZone){
}

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

scrollToBottom()
{
    this._zone.run(() => {

      const duration : number = 300;

      setTimeout(() => {
        
        this.content.scrollToBottom(duration).then(()=>{

          setTimeout(()=>{

            this.content.getScrollElement().then((element:any)=>{

              if (element.scrollTopMax != element.scrollTop)
              {
                // trigger scroll again.
                this.content.scrollToBottom(duration).then(()=>{

                  // loaded... do something

                });
              }
              else
              {
                // loaded... do something
              }
            });
          });
        });

      },20);
    }); 
}

@ViewChild(IonContent) content: IonContent;
scrollToBottom() {
    setTimeout(() => {
      if (this.content.scrollToBottom) {
        this.content.scrollToBottom();
      }
    }, 400);
  }

this.scrollToBottom();