How to inject requestAnimationFrame into angular-CodePudding

For example, I can get the document through the token.

How can I get window.requestAnimationFrame?

import { DOCUMENT } from '@angular/common'

constructor(
  @Inject(DOCUMENT) private readonly document: Document,
) { }

CodePudding user response：

use @Inject decorator outside the constructor and create a function and call the windows.requestAnimation

CodePudding user response：

To inject the requestAnimationFrame function in Angular, do this:

First, you need to make sure that the requestAnimationFrame function is available to your application. If you are using a modern browser, this function is available as a global object. However, if you are using an older browser you may need a polyfill.

Then, you need to inject the requestAnimationFrame function into your Angular component or service. To do this, you will need to import the Inject decorator from @angular/core and use it, to inject Window:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [
    { provide: Window, useValue: window }
  ]
})
export class AppComponent {
  constructor(@Inject(Window) private readonly window: Window) {
    // Now you can use the `requestAnimationFrame` function in your component
    this.window.requestAnimationFrame(() => {
      console.log('Animation frame requested');
    });
  }
}

Here is the stackblitz I made for you https://stackblitz.com/edit/angular-ivy-8rnsre?file=src/app/app.component.ts,src/app/app.component.html