Question

在组件1中，在我的ngOnit中，我正在订阅一个服务方法，该方法调用DB来获取某些东西。在1.5秒内加载我的页面就好了。然后我向前导航到页面/组件2，它有一个后退按钮，导航我回到视图1.

backBtn(){    
        this.router.navigate(['conversationlist'])
    }

查看1，然后再次加载ngOnit订阅者，或者至少应该加载。如果我在视图之间慢慢导航，它大部分都会发生。但是，如果我快速进入视图1，然后是backBtn（），则组件1订阅者方法会停止，并且需要大约20秒才能加载。这是我在视图1 ngOnit中调用的方法。同样，如果我在页面之间快速导航，此功能需要很长时间。但是，如果我从第一页导航到第2页，请等待几秒钟，然后导航回来通常很好。

为什么在快速导航时会出现这种情况，或者说这么困难？

ngOnInit() {


        this.getConvAndMessageSub = this._conversationListService.getConversationListAndMessages(0, listBatch).subscribe(
            data => {
                if(data){

                        for(let convo of data.conversationList)
                        {
                            this.conversationList.push(convo)

                        }
            },
            error => {
                console.log(error)
            })
    }

    ngOnDestroy(){
        this.getConvAndMessageSub.unsubscribe();
    }

这是服务代码：

getConversationListAndMessages(offset, batch){
        this.clearConversationList();

        const token = localStorage.getItem('token') ? '?token=' + localStorage.getItem('token') : '';
        return this._http.get('getConversationList/' + offset + '/' + batch + token )
            .map(response => {
                const convoList =         response.json().data.conversationList;

                this.myUser = response.json().data.myUser;
                let count = 0;

                if(response.json().data.conversationList.length == 0){
                    return {conversationList:'', myUser:this.myUser}
                }
                for(let convo of convoList){
                        this.setupUserObjects(convo);
                        this.getMessages(convo._id, -1, 0).subscribe(
                        data => {

                            convo.messages = data['messages'];

                            for(let message of data['messages']){
                                if(message.subscribersSeen.indexOf(myUser.uid) == -1){
                                    convo.unreadCount++;
                                }
                            }
                        },
                        error => {
                            console.log(error)
                        }
                    );

                    this.conversationList.push(convo)
                    count++;
                    if(count == convoList.length){

                        return {conversationList:this.conversationList, myUser:this.myUser}
                    }
                }


            })
            .catch(error => Observable.throw(error.json()));

    }

Answer 1

经过大量调试后，我注意到我有一些嵌套的Subscriber方法。我取消订阅了一些，但不是全部。在我确定我取消订阅组件更改后。这解决了这个问题。

angular2快速导航到路线停止订户

1 个答案: