Angular: изменение конечной точки службы в зависимости от точек прерывания носителя - PullRequest
Новая
       5

Angular: изменение конечной точки службы в зависимости от точек прерывания носителя

0 голосов
/ 17 мая 2018 
@Injectable() export class HomeService {   
    private _tUrl = 'this should be on desktop'; 
    private _tUrl = 'this should be on mobile'; 
}

Это для вызова API. Я хочу использовать только один зависит от размера устройства.

Ответы [ 2 ]

0 голосов
/ 17 мая 2018

Принимая следующую логику: 

@Injectable() export class HomeService {   
    ...

   fetchFromBackEnd():Observable<Foo>{
      // somehow get the current endpoint
      // and call a method from angular´s HttpClient
      // with the endpoint
   }
}

Учитывая этот сценарий, у вас есть 2 пути, которые ведут к возможному решению:

  • Реактивный (асинхронный)
  • Нереактивный (синхронный)

Первый будет выглядеть более или менее так: 

import {Observable} from 'rxjs/Observable'
import {switchMap, take}from 'rxjs/operators';

@Injectable() export class HomeService {   
   url$: Observable<string>;

   constructor(){
     this.url$ = this.createUrlStream();
   }

   fetchFromBackEnd():Observable<Foo>{
      const fetch: string => Observable<Foo> = (url) => this.http.get<Foo>(url);
      return this.url$.pipe(take(1),switchMap(url => fetch(url)); 
   }

   private createUrlStream():Observable<string>{
      // logic to map media query changes to a URL
   }
}

Нереактивный подход будет выглядеть следующим образом: 

@Injectable() export class HomeService {   
   get url(): string {
     // logic to synchronously match the current media breakpoints
     // to a URL
   }

   fetchFromBackEnd():Observable<Foo>{
      return this.http<Foo>(this.url);
   }
}

Чтобы не заново изобретать колесо или напрямую иметь дело с объектом window или другими деталями реализации, я бы предложил вам ввести еще один уровень абстракции с помощью LayoutModule углового материала CDK lib.

При использовании BreakpointObserver , предоставляемого библиотекой, 2-я реализация будет выглядеть так: 

@Injectable() export class HomeService {   
   get url(): string {
     return this.isMobile ? "mobileurl" : "desktopurl";
   }

   private get isMobile():boolean {
      // example
      return this.bpObserver.isMatched('(max-width: 599px)')
   }

   constructor(private bpObserver: BreakPointObserver){

   }

   fetchFromBackEnd():Observable<Foo>{
      return this.http<Foo>(this.url);
   }
}
0 голосов
/ 17 мая 2018

Вы можете просто проверить, используя window.matchmedia, чтобы проверить ширину области просмотра устройства, а затем вызвать API в зависимости от размера устройства. как это - 

@Injectable() export class HomeService {   
 constructor(){
   let mq = window.matchMedia("screen and (min-width:640px)")
   if (mq.matches) {
        this._tUrl = 'this should be on desktop'; 
   }
   else { this._tUrl = 'this should be on mobile';  }
   ...........
 }
...