Когда ngif из scrollDispatcher, переменная не работает - PullRequest
Новая
       11

Когда ngif из scrollDispatcher, переменная не работает

0 голосов
/ 05 июля 2019

В угловом режиме я использую scrollDispatcher (проверяющий прокрутку) флаг изменения переменной в html DOM, но 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, флаг должен быть истинным, это также верно, но * ngIf = "sectionStickyTitleState" (flag) всегда не может ответить.

Это действительно мешает мнепонять, потому что console.log всегда означает, что флаг равен true.

Ответы [ 2 ]

1 голос
/ 05 июля 2019

в соответствии с документами

, чтобы избежать обнаружения изменений для каждого события прокрутки, все события, генерируемые этим потоком, будут выполняться за пределами угловой зоны.Если вам нужно обновить какие-либо привязки данных в результате события прокрутки, вы должны запустить обратный вызов, используя 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, привязка шаблона не обновится, даже если будет напечатана консоль.

надеюсь, это поможет.

1 голос
/ 05 июля 2019

Есть несколько изменений, которые я бы предложил в вашем коде, используйте это вместо let и используйте функцию стрелки 

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