Angular Ionic 3-运行时错误无法读取null的属性“scrollToTop”
我在爱奥尼亚3号做一个项目。有不同的菜单。在选择菜单时,我只是发布一个事件并更改页面上数组的值。一切正常,但当页面数据更改时,滚动条仍保持在上一个位置。我希望每次我从菜单中选择一个项目,页面应该滚动到顶部 我用这个- 选择菜单项时将发布事件。代码可在app.component.ts处写入Angular Ionic 3-运行时错误无法读取null的属性“scrollToTop”,angular,typescript,ionic-framework,scroll,ionic3,Angular,Typescript,Ionic Framework,Scroll,Ionic3,我在爱奥尼亚3号做一个项目。有不同的菜单。在选择菜单时,我只是发布一个事件并更改页面上数组的值。一切正常,但当页面数据更改时,滚动条仍保持在上一个位置。我希望每次我从菜单中选择一个项目,页面应该滚动到顶部 我用这个- 选择菜单项时将发布事件。代码可在app.component.ts处写入 onSelectCourse(slug){ const loading = this.loadingCtrl.create({ content: 'Loading Articles'
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();
});
}
}
在主页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();
});
}
}
但是在选择一个项目时,我得到了这个错误
您无法在构造函数中访问它,即this.content.scrolltoop,因为dom尚未加载
您可以在此处使用IonViewDiEnter生命周期事件
ionViewDidEnter(){
events.subscribe('posts:listed', (data) => {
----
----
this.content.scrollToTop();
});
}
这个.content的值是什么?console.logthis.content;打印一长串值-Content{u config:config,_elementRef:elementRef,_renderer:RendererAdapter,_componentName:Content,_mode:ios,…}color:…检查它是否有scrollToTop方法?运行时没有?这是文档-当您从菜单中选择一项时,您是说订阅事件中的列表数据更改了吗?询问,因为我有类似的问题。是的,列表在页面中被更新,但滚动条保持在相同的位置。事件发布在何处或何时?当我选择一个菜单项时,事件被发布。代码可在app.component.ts.As@Sampath中写入,我认为您应该在stackblitz.com中模拟您的问题