Question

我正在用Angular中的socket.io设置一个聊天应用程序。通过订阅初始化可观察变量后，我无法立即运行代码/函数。初始化后，该特定代码应向下滚动到最新消息，但触发得太早。

我认为问题是因为下面的变量$(document).ready(function() { /* code here */ });没有足够的时间来获取消息列表。

使用chatList可以，但是根本不理想。

setTimeout(() => {/*scroll function here*/}, 1);

一旦可观察对象完成，运行代码/函数的正确方法是什么？

Answer 1

使用MutationObserver查看包含您的子列表的父节点。然后使用subject从回调中发出信号，表明列表已准备好进行滚动。从理论上讲，它应该工作

this.childReady=new Subject()
// replace the dom select with your angular viewChild nativeElement
var targetNode = document.getElementById('some-id');

// Options for the observer (which mutations to observe)
var config = {childList: true };

// Callback function to execute when mutations are observed
var callback = function(mutationsList, observer) {
        if (mutation.type == 'childList') {
              this.childReady.next(true)
        }
};

// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);

this.getMessages().pipe(
  tap((chat: string[]) => {
    this.chatList$ = chat;
   }),
   switchMap(()=>this.childReady())
).subscribe(()=>{
     this.conversationList.nativeElement.scrollTop = this.conversationList.nativeElement.scrollHeight;

})

初始化可观察变量后运行函数

1 个答案: