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 และตั้งค่าการเปลี่ยนแปลงทั้งหมด การแปลง และคุณสมบัติการเคลื่อนไหวอื่น ๆ แต่สิ่งนี้ทำให้บางอย่างเสียหาย เช่น ตัวแทนข้อความ:
มีวิธีใดบ้างในการทำสิ่งนี้แบบไดนามิกในขณะรันไทม์?
