Açısal Enjeksiyon Bağlamını Anlamak

May 02 2023
Angular, son sürümlerde Injector.get() yöntemini kullanmak yerine işlevsel bir şekilde bir sağlayıcıya referans almamızı sağlayan inject() işlevini tanıttı.

Angular inject(), yöntemi kullanmak yerine işlevsel bir şekilde bir sağlayıcıya referans almamızı sağlayan işlevi son sürümlerde tanıttı Injector.get(). Ancak, onu kullandıysanız veya onu kullanan bir kitaplık varsa, aşağıdaki hatayla karşılaşmış olabilirsiniz:

inject() must be called from an injection context 
such as a constructor, a factory function, a field initializer, 
or a function used with `runInInjectionContext`.

injectorAngular, an'ı belirli bir zamanda tutabilen iki global değişkene sahiptir : biri an için Injectorve diğeri for için NodeInjector. Her ikisi için de kod parçacıkları şunlardır:

let _currentInjector = undefined;

export function getCurrentInjector() {
  return _currentInjector;
}

export function setCurrentInjector(injector: Injector|undefined|null {
  const former = _currentInjector;
  _currentInjector = injector;
  return former;
}
let _injectImplementation

export function getInjectImplementation() {
  return _injectImplementation;
}

export function assertInInjectionContext(debugFn: Function): void {
  if (!getInjectImplementation() && !getCurrentInjector()) {
    throw new RuntimeError(
        RuntimeErrorCode.MISSING_INJECTION_CONTEXT,
        ngDevMode &&
            (debugFn.name +
             '() can only be used within an injection context such as a constructor, a factory function, a field initializer, or a function used with `runInInjectionContext`'));
  }
}

import {
  ElementRef,
  assertInInjectionContext,
  inject,
} from '@angular/core';

export function injectNativeElement<T extends Element>(): T {
  assertInInjectionContext(injectNativeElement);

  return inject(ElementRef).nativeElement;
}

  • factoryan için belirtilen işlevde InjectionToken:
  • export const FOO = new InjectionToken('FOO', {
      factory() {
        const value = inject(SOME_PROVIDER);
        return ...
      },
    });
    

    
    @Component({
      providers: [
        {
          provide: FOO,
          useFactory() {
            const value = inject(SOME_PROVIDER);
            return ...
          },
        },
      ]
    })
    export class FooComponent {}
    

    @Component({})
    export class FooComponent {
      foo = inject(FOO);
    
      constructor(private ngZone: NgZone = inject(NgZone)) {
        const bar = inject(BAR);
      }
    }
    

  • İşlev kullanılarak yürütülen bir işlevin içinde runInInjectionContext:
  • import { runInInjectionContext } from '@angular/core';
    
    export class FooComponent {
      ngOnInit() {
        runInInjectionContext(this.injector, () => {
          console.log(
            'I can access the NodeInjector using inject()',
            inject(ElementRef)
          );
        })
    }
    

Angular ve JS hakkında daha fazlasını okumak için Medium veya Twitter'da beni takip edin !