ngClass не обновляет класс динамически

Question

Я хочу изменить внешний вид моей панели навигации, когда свиток находится не сверху.

Я использую Angular Material CdkScrollable и успешно извлекаю событие прокрутки, которое дает мне данныео том, как далеко он до вершины.

У меня проблема в том, что классы CSS никогда не меняются при прокрутке.С помощью console.log я проверяю, что переменная isScrolled корректно обновляется всякий раз, когда я прокручиваю вниз и снова вверх.Так что, кажется, работает хорошо.Я использую ngClass с троичным для проверки того, какой класс CSS должен применяться.

Что-то очевидно, что мне не хватает?

html

<nav [ngClass]="isScrolled ? 'navbar-desktop-scrolled' : 'navbar-desktop'">
   ...
</nav>

тс

export class MainNavComponent implements AfterViewInit {
 @ViewChild(MatSidenavContainer, { static: false }) sidenavContainer: MatSidenavContainer;

 isScrolled: boolean = false;

 ngAfterViewInit() {
    this.sidenavContainer.scrollable.elementScrolled().subscribe((x) => {
      if ((<Element>x.target).scrollTop > 0) {
        this.isScrolled = true;
      } else {
        this.isScrolled = false;
      }

      console.log(this.isScrolled);
    })
  }
}

Answer 1

Все работает нормально после того, как я добавил функцию обнаружения изменений.

export class MainNavComponent implements AfterViewInit {
 @ViewChild(MatSidenavContainer, { static: false }) sidenavContainer: MatSidenavContainer;

 isScrolled: boolean = false;

 constructor(private ref: ChangeDetectorRef) { }

 ngAfterViewInit() {
    this.sidenavContainer.scrollable.elementScrolled().subscribe((x) => {
      if ((<Element>x.target).scrollTop > 0) {
        this.isScrolled = true;
      } else {
        this.isScrolled = false;
      }

      this.ref.detectChanges();
    })
  }
}

Answer 2

Ознакомьтесь с документацией: ngClass

Object - ключи - это классы CSS, которые добавляются, когда выражение, данное в значении, принимает истинное значение, в противном случае они удаляются.

Это должно выглядеть примерно так:

<some-element [ngClass]="{'navbar-desktop-scrolled': isScrolled , 'navbar-desktop' : !isScrolled  }">...</some-element>

Answer 3

Ваш код не работает, потому что изменения не обнаружены.Вместо этого используйте Observable в сочетании с async pipe.Он обрабатывает подписки автоматически для вас.

export class MainNavComponent implements AfterViewInit {
  @ViewChild(MatSidenavContainer, { static: false }) 
  sidenavContainer: MatSidenavContainer;
  navbarType$: Observable<string>;

  ngAfterViewInit() {
    this.navbarType$ = this.sidenavContainer.scrollable.elementScrolled().pipe(
      map(x => x.target.scrollTop > 0
        ? 'navbar-desktop-scrolled'
        : 'navbar-desktop'
      )
    )
  }
}

А в вашем шаблоне используйте

<nav [ngClass]="navbarType$ | async"></nav>

Answer 4

используйте ngClass в синтаксисе объекта, например

<nav [ngClass]="{'navbar-desktop-scrolled' :isScrolled, 'navbar-desktop': !isScrolled}">
   ...
</nav>