ค้นหาเว็บไซต์

typescript - วิธีปิดการเคลื่อนไหวของ Angular โดยใช้ผู้ให้บริการแบบไดนามิก?


ฉันต้องการปิดการใช้งานแอนิเมชันทั้งหมดของ Angular Material บนหน้าของฉันในขณะรันไทม์ตามความต้องการของผู้ใช้ (การคลิกปุ่ม) ฉันรู้ว่าฉันสามารถทำได้โดยการนำเข้า NoopAnimationsModule แต่ฉันไม่สามารถทำได้แบบไดนามิก (หลังจากการโต้ตอบของผู้ใช้ในแอปพลิเคชัน)

ฉันกำลังใช้ Angular Material 8.2 - โดยทั่วไปความคิดของฉันคือการนำเข้า BrowserAnimationsModule ปกติใน AppModule ของฉัน แต่เปลี่ยนผู้ให้บริการ ตอนแรกฉันทำด้วยตนเอง:

{ provide: AnimationDriver, useClass: NoopAnimationDriver },
{ provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' }

มันใช้ได้ผล ดังนั้นฉันจึงอยากใช้ประโยชน์จาก 'useFactory' เพื่อทำให้มันมีความยืดหยุ่นมากขึ้น:

{ provide: ANIMATION_MODULE_TYPE, useValue: 'NoopAnimations' },
{ provide: AnimationDriver,
  deps: [SomeService],
  useFactory: (someService) => someService.getDriver()
}
import { ɵNoopAnimationDriver as NoopAnimationDriver } from '@angular/animations/browser';

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  animationsDisabled: boolean = true;

  constructor() {
  }

  getDriver(): any {
    if (this.animationsDisabled) {
      return new NoopAnimationDriver();
    }
  }
}

มันใช้ได้ แต่เมื่อฉันต้องการส่งกลับ AnimationDriver (จาก BrowserAnimationsModule) ตามการทำงานของฟังก์ชัน instantiateSupportedAnimationDriver() จากตรงนี้มีปัญหา new WebAnimationsDriver() และ new CssKeyframesDriver() ที่ตั้งค่าด้วยตนเองสามารถทำงานได้ แต่ทำงานได้แค่บางส่วน ไม่สามารถบอกเหตุผลได้จริง ๆ - แอนิเมชัน 70% ทำงานตามที่คาดหวัง ส่วน 30% ไม่ทำงาน

import { ɵNoopAnimationDriver as NoopAnimationDriver } from '@angular/animations/browser';

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  animationsDisabled: boolean = false;

  constructor() {
  }

  getDriver(): any {
    if (this.animationsDisabled) {
      return new NoopAnimationDriver();
    } else {
      return new WebAnimationsDriver();
      // or return new CssKeyframesDriver()}
  }
}

ปัญหาหรือคำถามถัดไปคือ - การเปลี่ยนค่าฟิลด์ animationsDisabled แบบไดนามิก (เช่น ใช้ Subject) สามารถโหลด useFactory ใหม่และเปลี่ยน AnimationDriver ได้หรือไม่? อาจจะมีวิธีอื่นในการทำสิ่งนี้หรือไม่?

ความพยายามครั้งอื่นของฉันคือการใช้ตัวเลือก * ใน CSS และตั้งค่าการเปลี่ยนแปลงทั้งหมด การแปลง และคุณสมบัติการเคลื่อนไหวอื่น ๆ แต่สิ่งนี้ทำให้บางอย่างเสียหาย เช่น ตัวแทนข้อความ:

มีวิธีใดบ้างในการทำสิ่งนี้แบบไดนามิกในขณะรันไทม์?