具体示例

Question

在角度模式下，我在html DOM上使用scrollDispatcher（检查滚动）更改变量标志，但是DOM（ngif）无法正常工作，有我的测试代码：

// html
<div *ngIf="scrollState">
  scrolling!
</div>

// TS
import { ScrollDispatcher } from '@angular/cdk/scrolling';
...
scrollState = false;
...
constructor( private scrollDispatcher: ScrollDispatcher){
    let self = this;
    this.scrollDispatcher.scrolled().subscribe( function () {
      self.scrollState = true;
      console.log('now scrolling!', self.scrollState ); 
      //checking scrollState, it's true
    });
}

当我滚动时，不显示DOM，但是我检查self.scrollState是否真实，为什么？我听不懂，请帮助我，谢谢。

具体示例

//html
<div class="sectionStickyTitle" *ngIf="sectionStickyTitleState">
  <h2>Test new title</h2>
</div>

<h1 class="section-h1" #sectionh1>I'm check top target</h1>

//TS
import { ScrollDispatcher } from '@angular/cdk/scrolling';
...
@ViewChild('sectionh1') sectionh1: ElementRef;
sectionStickyTitleState = false;
sectionhOffsetTop: number;
...
constructor(private scrollDispatcher: ScrollDispatcher, ...){
}

ngOnInit(){
 ...
 this.scrollDispatcher.scrolled().subscribe(() => this.setSectionStickyTitle());
}

...
setSectionStickyTitle() {
  this.sectionhOffsetTop = this.sectionh1.nativeElement.getBoundingClientRect().top;

  this.sectionStickyTitleState = (this.sectionhOffsetTop <= 21) ? true : false;

  console.log('sectionStickyTitleState --> ', this.sectionStickyTitleState);
  console.log('sectionhOffsetTop --> ', this.sectionhOffsetTop);
}

我重新编辑了这个问题，目的是相同的，该标记不能被html识别，当＃sectionh1的高度小于21时，标记必须为true，它也为true，但是* ngIf = “ sectionStickyTitleState”（标志）始终无法响应。

这确实让我很难理解，因为console.log始终表示flag为true。

Answer 1

我建议您在代码中进行一些更改，请使用此方法代替let和使用箭头功能

constructor( private scrollDispatcher: ScrollDispatcher){
    this.scrollDispatcher.scrolled().subscribe() => {
      this.scrollState = true;
      console.log('now scrolling!', this.scrollState ); 
    });
}

Answer 2

根据docs

为了避免在每个滚动事件中都遇到更改检测，所有此流发出的事件的一部分将在Angular之外运行区。如果由于滚动而需要更新任何数据绑定事件，则必须使用NgZone.run运行回调。

所以，请执行以下操作；

constructor(private scrollDispatcher: ScrollDispatcher, private zone: NgZone){}

ngOnInit() {
  this.scrollDispatcher.scrolled().subscribe(() => {
    this.zone.run(() => {
      this.setSectionStickyTitle();
    });
  });
}

我还在https://stackblitz.com/edit/angular-msn4ma

处创建了一个演示在上面的演示中，当您滚动body或div1时，模板绑定会正确更新。但是如果滚动div2，即使模板绑定打印控制台，它也不会更新。

希望有帮助。

从scrollDispatcher中获取ngif时，变量不起作用

具体示例

2 个答案: