2017-10-26 4 views
0

新しいAPIを使用してMaterial2のスクロールイベントをリッスンしようとしています。 私はViewChildとコンポーネントでそれにアクセスして、このようなイベントをサブスクライブしたいと思いますが、スクロール可能な変数である私のapp.module.tsでScrollDispatchModuleをインポートし、Material2 cdkスクロールが初期化されない

<div cdkScrollable> 
    <div class="my-content"> 
    ... 
    </div> 
    <footer class="my-footer"> 
    ... 
    </footer> 
</div> 

のようにcdkScrollableディレクティブでコンテナを注釈付き常に定義されていません:

@ViewChild(Scrollable) scrollable: Scrollable; 

    ngAfterViewInit() { 
    this.scrollable.elementScrolled().subscribe(scrolled => { 
     //do stuff 
    }); 
    } 

私は正しい方法でこれらのAPIを使用していますか?

+0

スナップショットビルドを使用している場合、@Pankaj Parkarの答えは正しいです。 beta.12を使用している場合、あなたが書いたものはうまくいくはずです。この[例](https://stackblitz.com/edit/material2-beta12-yzyhjd?file=app%2Fapp.component.ts)を確認してください。 –

+0

何らかの理由で今は動作しますが、なぜ私に尋ねないのですか...おそらく、私がその間に解決した他の明らかに無関係なエラーがありました。私はまだ 'scrollable.getElementRef()'によって返される 'undefined'を取得しました。私はdivの参照を取得するために使用していましたが、代わりにEventターゲットを使用していました。 –

答えて

3

Scrollableディレクティブは@angular/cdkモジュールに移動されました。それ以来、Scrollableクラスの刺激を受けるには、CdkScrollableに使用する必要があります。

@ViewChild(CdkScrollable) scrollable: CdkScrollable; 
+0

ディレクティブ名は 'Scrollable'なので、これはうまくいくとは思わない。 –

+0

@WillHowell Angular Material APIをチェックした。[こちらをチェック](https://github.com/angular/material2/blob/master/src/cdk /scrolling/scrollable.ts#L23) –

+0

ああ、私はドキュメントサイトを見ていました。最後のリリースから更新されています。明確にするためにあなたの答えを更新するなら、あなたは私から+1を得るでしょう。 –

関連する問題