कोणीय में अवलोकन सेवाएं

सभी को नमस्कार, मेरा नाम व्लादिमीर है। मैं Tinkoff.ru में फ्रंट-एंड डेवलपमेंट में लगा हूं।

कोणीय में, हम सेवाओं का उपयोग किसी एप्लिकेशन के अंदर डेटा स्थानांतरित करने या व्यावसायिक तर्क को एनकैप्सुलेट करने के लिए करते हैं। RxJS अतुल्यकालिक धागे के प्रबंधन के लिए बहुत अच्छा है।

RxJS के साथ संयोजन में कोणीय आपको एक घोषणात्मक शैली में लिखने की अनुमति देता है, लघु और स्पष्ट। लेकिन कभी-कभी हम तीसरे पक्ष के पुस्तकालयों या एपीआई में आते हैं जो कॉलबैक, वादों का उपयोग करते हैं, जिससे हमें सामान्य शैली को त्यागने और अनिवार्य रूप से लिखने के लिए धक्का मिलता है।

लेख का उद्देश्य समान एपीआई के उदाहरण से दिखाना है कि कैसे RxJS का उपयोग करके उन्हें आसानी से ऑब्जर्वेबल सेवाओं में लपेटा जा सकता है। यह कोणीय में प्रयोज्य प्राप्त करने में मदद करेगा। चलो जियोलोकेशन एपीआई के साथ शुरू करते हैं।

जियोलोकेशन एपीआई

यदि उपयोगकर्ता इससे सहमत है तो जियोलोकेशन एपीआई उपयोगकर्ता को वेब एप्लिकेशन को अपना स्थान प्रदान करने की अनुमति देता है। गोपनीयता कारणों से, उपयोगकर्ता को स्थान की जानकारी प्रदान करने की अनुमति मांगी जाएगी।

निम्नलिखित मूल जियोलोकेशन एपीआई के मूल उपयोग का एक उदाहरण है।

, Geolocation :

if('geolocation' in navigator) {
 /* geolocation is available */ 
} else {
 /* geolocation IS NOT available */ 
}

getCurrentPosition(), . watchPosition(), , . , .

...
success(position) {
 doSomething(position.coords.latitude, position.coords.longitude);
} 

error() {
 alert('Sorry, no position available.');
} 

watch() {
 this.watchID = navigator.geolocation.watchPosition(this.success, this.error);
}

stopWatch() {
  navigator.geolocation.clearWatch(this.watchID);
}
...

- , clearWatch() id . . . , RxJS Observable.

Geolocation, . . NAVIGATOR @ng-web-apis/common.

export const GEOLOCATION = new InjectionToken<Geolocation>(
   'An abstraction over window.navigator.geolocation object',
   {
       factory: () => inject(NAVIGATOR).geolocation,
   },
);

, Geolocation API:

export const GEOLOCATION_SUPPORT = new InjectionToken<boolean>(
   'Is Geolocation API supported?',
   {
       factory: () => !!inject(GEOLOCATION),
   },
);

PositionOptions:

import {InjectionToken} from '@angular/core';

export const POSITION_OPTIONS = new InjectionToken<PositionOptions>(
   'Token for an additional position options',
   {factory: () => ({})},
);

! Observable .

Observable, , , . , . Subscriber, , next(), complete() error(). , :

@Injectable({
   providedIn: 'root',
})
export class GeolocationService extends Observable<Position> {
   constructor(
       @Inject(GEOLOCATION) geolocationRef: Geolocation) {

       super(subscriber => {

           geolocationRef.watchPosition(
               position => subscriber.next(position),
               positionError => subscriber.error(positionError),
           );
       });
   }
}

:

@Injectable({
   providedIn: 'root',
})
export class GeolocationService extends Observable<Position> {
  constructor(
  @Inject(GEOLOCATION) geolocationRef: Geolocation,
  @Inject(GEOLOCATION_SUPPORT) geolocationSupported: boolean,
  @Inject(POSITION_OPTIONS) positionOptions: PositionOptions,
) {
  super(subscriber => {
    if (!geolocationSupported) {
      subscriber.error('Geolocation is not supported in your browser');
    }

    geolocationRef.watchPosition(
      position => subscriber.next(position),
      positionError => subscriber.error(positionError),
      positionOptions,
    );
   })
  }
}

! Observable, pipe(). RxJS- . , , RxJS- shareReplay().
share()? , Geolocation API getCurrentPosition() watchPosition() Timeout expired. shareReplay() , , . {bufferSize: 1, refCount: true}, . clearWatch()-, , RxJS- finalize():

@Injectable({
   providedIn: 'root',
})
export class GeolocationService extends Observable<Position> {
   constructor(
       @Inject(GEOLOCATION) geolocationRef: Geolocation,
       @Inject(GEOLOCATION_SUPPORT) geolocationSupported: boolean,
       @Inject(POSITION_OPTIONS)
       positionOptions: PositionOptions,
   ) {
       let watchPositionId = 0;

       super(subscriber => {
           if (!geolocationSupported) {
               subscriber.error('Geolocation is not supported in your browser');
           }

           watchPositionId = geolocationRef.watchPosition(
               position => subscriber.next(position),
               positionError => subscriber.error(positionError),
               positionOptions,
           );
       });

       return this.pipe(
           finalize(() => geolocationRef.clearWatch(watchPositionId)),
           shareReplay({bufferSize: 1, refCount: true}),
       );
   }
}

! , :

...
constructor(@Inject(GeolocationService) private readonly position$: Observable<Position>) {}
...
   position$.pipe(take(1)).subscribe(position => doSomethingWithPosition(position));
...

, async pipe. @angular/google-maps .

<app-map
       [position]="position$ | async"
></app-map>

RxJS .

Geolocation API. . npm.

ResizeObserver API , .

ResizeObserver API

API Resize Observer , .

Geolocation API, ResizeObserver API . Observable-. , . , , :

@Injectable()
export class ResizeObserverService extends Observable<
   ReadonlyArray<ResizeObserverEntry>
> {
   constructor(
       @Inject(ElementRef) {nativeElement}: ElementRef<Element>,
       @Inject(NgZone) ngZone: NgZone,
       @Inject(RESIZE_OBSERVER_SUPPORT) support: boolean,
       @Inject(RESIZE_OPTION_BOX) box: ResizeObserverOptions['box'],
   ) {
       let observer: ResizeObserver;

       super(subscriber => {
           if (!support) {
               subscriber.error('ResizeObserver is not supported in your browser');
           }

           observer = new ResizeObserver(entries => {
               ngZone.run(() => {
                   subscriber.next(entries);
               });
           });
           observer.observe(nativeElement, {box});
       });

       return this.pipe(
           finalize(() => observer.disconnect()),
           share(),
       );
   }
}

ResizeObserver. next() ngZone() .

Geolocation- , ElementRef. , observe(). . Dependency Injection , .

, . . Output(), :

@Directive({
   selector: '[waResizeObserver]',
   providers: [
       ResizeObserverService,
       {
           provide: RESIZE_OPTION_BOX,
           deps: [[new Attribute('waResizeBox')]],
           useFactory: boxFactory,
       },
   ],
})
export class ResizeObserverDirective {
   @Output()
   readonly waResizeObserver: Observable<ResizeObserverEntry[]>;

   constructor(
       @Inject(ResizeObserverService)
       entries$: Observable<ResizeObserverEntry[]>
   ) {
       this.waResizeObserver = entries$;
   }
}

, RESIZE_OPTION_BOX . ReziseObserver .

. , :

<div
       waResizeBox="content-box"
       (waResizeObserver)="onResize($event)"
   >
       Resizable box
</div>

...
   onResize(entry: ResizeObserverEntry[]) {
       // do something with entry
   }
...

open-source-, npm. «».

RxJS Dependency Injection API, . . , — , @ng-web-apis/midi. .

, .

, , Web APIs for Angular. — API Angular-. , , , Payment Request API Intersection Observer, — .