javascript - 在 Angular 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，因为我想像上面的jquery代码一样添加/删除每个html元素的收缩。

Answer 1

您可以使用angular2的class binding ，在代码中根据滚动值将 bool 属性设置为 true 或 false，如下所示:

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

  this.addShrinkClass = number > 150;
});

并在您的 .navbar 标记上使用 [class.shrink] 绑定(bind)，如下所示:

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