Question

我正在Angular中构建一个Web应用程序，并且我一直在尝试使用ngClass指令动态更改类。但是，在更新指令的条件时，它并不总是有效。

在滚动时，我尝试过在jQuery回调函数中更新条件，但它不起作用。但是，当我通过函数更改条件值时，它就起作用了！我将在下面提供您的代码，以便您了解我在说什么。

navbar.component.ts

export class NavbarComponent implements OnInit {
  stickyNavbar = false;
  constructor() { }

  ngOnInit() {
    $(document).ready(() => {
      let scrolled = false;
      $(document).scroll(()=>{
        this.stickyNavbar = true;
        console.log(this.stickyNavbar);
      })
    })
  }
  public test() {
    this.stickyNavbar = true;
  }
}

navbar.component.html

<li class="nav-item active">
        <a class="nav-link" [ngClass]="{'dark': stickyNavbar, 'light': !stickyNavbar}" href="#">Home</a>
      </li>
<li class="nav-item">
        <button class="btn nav-link" [ngClass]="{'dark': stickyNavbar, 'light': !stickyNavbar}" (click)="test()">Test</button>
      </li>

通常，当我将stickyNavbar更改为true时，<li>应该得到dark类。滚动页面时不会发生这种情况，但是如果我按下调用test()函数的按钮，它将起作用并更改类。如果我在jQuery test()函数中调用scroll()函数，它将无法正常工作。顺便说一下，我正在使用Angular 8。

编辑：*ngIf也不起作用。

Answer 1

如果您使用jQuery（我个人不喜欢使用jQuery和Angular，JQuery会更改DOM，但是您松开了视图模型关系，而且Angular具有独特的机制来避免使用jQuery），则需要使用ngZone 。 Angular在Angular之外一无所知

constructor(private _ngZone: NgZone){}
ngOnInit() {
    $(document).ready(() => {
      let scrolled = false;
      $(document).scroll(()=>{
        this._ngZone.run(() => { 
        this.stickyNavbar = true; 
         });
      })
    })
  }

但是，在这种情况下，您可以使用简单的HostListener

  @HostListener('document:scroll',['$event'])
  onScroll(event:any)
  {
        this.stickyNavbar = true;
  }

查看demo in stackblitz

在jQuery函数中更改条件时ngClass不起作用

1 个答案: