2017-11-02 9 views
2

저는 이오닉 3 프로젝트에서 작업하고 있습니다. 다른 메뉴가 있습니다. 메뉴를 선택할 때 이벤트를 게시하고 페이지의 배열 값을 변경하는 것입니다. 모든 것이 잘 작동하지만 페이지의 데이터가 변경되면 스크롤 막대가 이전 위치에 유지됩니다. 나는 메뉴에서 항목을 선택할 때마다 페이지를 맨 위로 스크롤해야한다고 생각합니다. 이를 위해 이오닉 3 - 런타임 오류 null의 scrollToTop 속성을 읽을 수 없습니다

나는 이벤트는 메뉴 항목을 선택에 게시되고 this-

을 사용하고 있습니다. 코드가 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(); 
     }); 
    } 
} 

홈페이지에서 이벤트를 구독 (home.ts)에서 writtent한다 -

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

+0

"메뉴에서 항목을 선택"하면 구독 된 이벤트의 목록 데이터가 변경됩니다. 비슷한 문제가 발생했기 때문에 묻습니다. –

+0

예 목록이 페이지에서 업데이트되고 있지만 스크롤 막대가 같은 위치에 남아 있습니다 .. –

+0

이벤트가 게시되는시기는 언제입니까? –

답변

1

아직로드되지 않은 constructor()dom 때문에 내부에 그것을 (즉 this.content.scrollToTop()를) 액세스 할 수 없습니다.

여기서 라이프 사이클 이벤트 ionViewDidEnter()을 사용할 수 있습니다.

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

동일하지만 여전히 같은 오류가있었습니다. –

+0

'this.content'의 값은 무엇입니까? – Sampath

+0

console.log (this.content); {_config : Config, _elementRef : ElementRef, _renderer : RendererAdapter, _componentName : "content", _mode : "ios", ...} 색상 : (...) –