2016-09-08 18 views
1

私はチャプターコンポーネントを持っている、angular2アプリケーション(RC5)を持っています。私はその後、ためと以前の章のためのいくつかの矢印ボタンを持ってコンポーネントをナビゲートしたときにイベントをトリガする方法は?

<div *ngIf="chapter == 1"> 
<!-- Chapter 1 content --> 
</div> 
<div *ngIf="chapter == 2"> 
<!-- Chapter 2 content --> 
</div> 
<!-- etc. --> 

:これを持っている - chapter.html - これは基本的に大きなテンプレートファイルを持っています。これらはイベントをトリガする。

if (this.chapter !== '6') { 
    var next = parseInt(this.chapter) + 1; 
    console.log(next); 
    let link = ['/tutorial/chapter', next]; 
    this.router.navigate(link); 
} 

すべてが正常に動作しているので、しかし、ボタンは章の一番下にあるので、それらをクリックすると、次の章が表示されますが、自動的に下にスクロールされます。したがって、ルータのクリックで、イベントをトリガしてページの上部にスクロールしたいのですが、同じコンポーネントに移動するときには、ngOnInit()はトリガされません。

どうすればいいですか?

+0

'window.scrollTop = 0の変化にスクロール呼び出すことができます;'スクロールバックアップ? – epascarello

+0

@epascarelloはい、そうですが、コンポーネントをナビゲートした後にトリガされるイベントを実行するイベントが必要です –

+0

チャットが更新されたとき、またはrouter.subscribeがリッスンされているときにリッスンしますか? – epascarello

答えて

1

同じコンポーネントに移動すると、少なくともパラメータが変更されます。変更されていないと、ルータは再ナビゲートしません。

あなたはパラメータの変更をサブスクライブして

constructor(private route:ActivatedRoute) { 
    this.route.params.forEach(p => this.doScroll()); 
} 
+0

また、垂直にオーバーフローするdivの上部にスクロールすることをおすすめしますか?多分あなたの[答え](http://stackoverflow.com/questions/37376442/where-does-dom-manipulation-belong-in-angular-2)のように? –

+0

scrollTopを0に設定することはできませんか? –

+0

のように 'window.scrollTop = 0;'? –

1
constructor(private route:ActivatedRoute) { 
    this.route.params.subscribe(params => { 
     //do your stuffs... 
    }); 
}  
関連する問題