角度2のクラスセレクタの追加と削除

Question

私はウィンドウのスクロール値に応じてスタイリングを変更したいページヘッダコンポーネントを持っています。私はスクロール値が特定の値より大きい場合、クラスを追加したいと思います。私はjqueryのコードを持っています。

$(window).scroll(function() { 
    if ($(document).scrollTop() > 150) { 
     $('.navbar').addClass('shrink'); 
    } else { 
     $('.navbar').removeClass('shrink'); 
    } 
}); 

http://bootsnipp.com/snippets/z1Dx8

今まで、私は

renderer.listenGlobal('window', 'scroll', (event) => { 
     const number = this.document.body.scrollTop; 
     if (number > 150) { 
     // add logic 
     } else { 
     // remove logic 
     } 
    }); 

は私が追加したいので、私はviewchild使用することはできませんだと思いスクロール値を取得することができる午前/あらゆるから縮小削除html要素は上記のjqueryコードと同様です。

Answer 1

あなたはこのように、あなたのコード内でスクロール値に応じてtrueまたはfalseにブール型プロパティを設定し、angular2のclass bindingを使用することができます。

renderer.listenGlobal('window', 'scroll', (event) => { 
    let number = this.document.body.scrollTop; 

    this.addShrinkClass = number > 150; 
}); 

そして、あなたの.navbarタグの使用上の結合[class.shrink]次のようになります。

<div class="navbar" [class.shrink]="addShrinkClass"></div>