Búsqueda de sitios web

typescript - ¿Cómo desactivar las animaciones de Angular usando proveedores dinámicos?


Quiero desactivar todas las animaciones de Angular Material en mi página en tiempo de ejecución según las preferencias del usuario (clic en un botón). Sé que puedo hacerlo importando NoopAnimationsModule, pero no puedo hacerlo de manera dinámica (después de la interacción del usuario en la aplicación).

Estoy usando Angular Material 8.2 - generalmente mi idea era importar BrowserAnimationsModule normalmente en mi AppModule, pero cambiar los proveedores. Al principio lo hice manualmente:

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

Funcionó, así que luego quise aprovechar 'useFactory' para hacerlo de manera más dinámica:

{ 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();
    }
  }
}

Funcionó, pero cuando quise devolver AnimationDriver (del BrowserAnimationsModule) basado en la implementación de la función instantiateSupportedAnimationDriver() de aquí, hubo un problema. Tanto new WebAnimationsDriver() como new CssKeyframesDriver() configurados manualmente funcionan, pero solo en algunas partes. Realmente no puedo decir por qué: el 70 % de las animaciones funcionan como se espera, el 30 % no.

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()}
  }
}

El siguiente problema/pregunta es: ¿cambiar dinámicamente el campo animationsDisabled (usando por ejemplo Subject) puede recargar useFactory y cambiar AnimationDriver? ¿Quizás hay alguna otra forma de hacerlo?

Mi otro intento fue usar el selector * en CSS y establecer todas las transiciones, transformaciones y otras propiedades de animación, pero rompe algunas otras cosas como los marcadores de posición:

¿Hay alguna manera de lograr esto dinámicamente en tiempo de ejecución?