Question

每当滚动条不在顶部时，我想更改导航栏的外观。

我正在使用Angular Material CdkScrollable，并且成功检索了滚动事件，该滚动事件为我提供了有关到顶部的距离的数据。

我的问题是，滚动时CSS类永远不会改变。我正在使用console.log进行验证，只要我再次向下和向上滚动，变量isScrolled就会正确更新。这样看来行得通。我正在使用带有三元数的ngClass来验证应该应用哪个CSS类。

很明显我不见了？

html

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

ts

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

在对象语法中使用ngClass，例如

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

Answer 2

您的代码不起作用，因为未检测到更改。请将async管道与Observable结合使用。它会自动为您处理订阅。

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 3

添加更改检测功能后，一切正常。

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 4

查看文档：{{3}}

Object-键是CSS类，当值中给出的表达式计算为真实值时会添加键，否则它们将被删除。

它看起来应该像这样：

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

ngClass不动态更新类

4 个答案: