首页 文章

Ionic 3 - 运行时错误无法读取属性'scrollToTop'的null

提问于
浏览 次
2

我正在研究Ionic 3的项目 . 有不同的菜单 . 在选择菜单时，我只是发布一个事件并更改页面上数组的值 . 一切正常，但当页面数据发生变化时，滚动条仍保留在前一个位置 . 我希望每当我从菜单中选择一个项目时，页面应该滚动到顶部 .

为此，我用这个 -

正在发布选择菜单项的事件 . 该代码在app.component.ts上是可写的

onSelectCourse(slug){
    const loading = this.loadingCtrl.create({
        content: 'Loading Articles'
    });
    loading.present();
    if(slug == 'all'){
        this.postsProvider.listPosts(1)
        .subscribe(data => {
            this.events.publish('posts:listed', data);
            loading.dismiss();
            this.menuCtrl.close();
        });
    }
    else{
        this.postsProvider.listPostsByCategory(slug, 1)
        .subscribe(data => {
            this.events.publish('posts:listed', data);
            loading.dismiss();
            this.menuCtrl.close();
        });
    }
}

在HomePage订阅活动（home.ts） -

export class HomePage {
    posts: any = [];
    pages: number;
    page: number;
    category: string;
    @ViewChild(Content) content: Content;
    constructor(
                private events: Events,
                private postsProvider: PostsProvider,
                private changeRef:ChangeDetectorRef) {
        this.events.subscribe('posts:listed', (data) => {
            this.posts = data.posts;
            this.pages = data.pages;
            this.page = 1;
            this.category = data.category;
            this.changeRef && this.changeRef.detectChanges();
            this.content.scrollToTop();
        });
    }
}

但是在选择项目时，我收到了这个错误

enter image description here

angular typescript ionic-framework scroll ionic3

1 回答

  • 1

    您无法在 constructor() 内访问它（即 this.content.scrollToTop() ），因为尚未加载 dom .

    您可以在此处使用 ionViewDidEnter() 生命周期事件 .

    ionViewDidEnter(){
 events.subscribe('posts:listed', (data) => {
            ----
            ----
            this.content.scrollToTop();
        });
}
    回复于

相关问题