Angular DOM 未更新

Question

我尝试使用我的滑块创建效果（我使用 Swiper）。

我可以在移动事件中检索滑块的确切位置，我可以在 console.log 中看到该位置实时更新，但这些变化没有反映在 DOM 中，我不知道不明白为什么...

这是我的组件：

ngOnInit(){

    this.swiper = new Swiper(containerSelector, {
      width:375,
      slidesPerView: 1,
      initialSlide: 1
    });

  }

  ngAfterViewInit(){
    this.swiper.on('setTranslate', function(translate){
      this.currentTranslate = Math.abs(translate);
      this.windowWidth = window.screen.width;
      if(this.currentTranslate == this.windowWidth){
        // Home view
        console.log("middle !");
        this.scaleYahLogo = 1;
        this.scaleYahIcn = 0;
        this.opacityChatsGrey = 1;
        this.opacityChatsColor = 0;
        this.opacityProfileGrey = 1;
        this.opacityProfileColor = 0;
        this.headerPosi = 0;
      } 
      else if(this.currentTranslate < this.windowWidth){
        // Profile view
        console.log("left !");
        this.scaleYahLogo = 0;
        this.scaleYahIcn = 1;
        this.opacityChatsGrey = 0;
        this.opacityChatsColor = 1;
        this.opacityProfileGrey = 0;
        this.opacityProfileColor = 1;
        this.headerPosi = 0;
      }
      else if(this.currentTranslate > this.windowWidth){
        // Chats view
        console.log("right !");
        this.scaleYahLogo = 0;
        this.scaleYahIcn = 1;
        this.opacityChatsGrey = 0;
        this.opacityChatsColor = 1;
        this.opacityProfileGrey = 0;
        this.opacityProfileColor = 1;
        this.headerPosi = 0;
      }
    }) 
  }

我做错了什么？我从昨天开始挣扎...

谢谢大家！

Answer 1

this关键字中的Javascriptfunction()指的是函数的作用域。要使用成员变量，请使用箭头函数。您可以尝试以下方法

ngAfterViewInit() {
  this.swiper.on('setTranslate', (translate) => {  // <-- arrow function instead of `function()` construct
    this.currentTranslate = Math.abs(translate);
    this.windowWidth = window.screen.width;
    if (this.currentTranslate == this.windowWidth) {
    .
    .
    .
  })
}

Answer 2

这是因为您的修改是在 angular 的更改检测周期之外进行的（使用 on 处理程序）

使用 ChangeDetectorRef 通知 angular 您的更改

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef){}


this.swiper.on('setTranslate', (translate) =>{

    //Your code here
    this.currentTranslate = Math.abs(translate);
      this.windowWidth = window.screen.width;
      //...
    this.cdr.detectChanges();// Call this method
});//end translate

Angular DOM 未更新

Angular DOM is not updated

swiper

ionic-framework

angular