Angular DI Service - Отображение свойств - PullRequest
Новая
       8

Angular DI Service - Отображение свойств

0 голосов
/ 15 октября 2019

У меня есть служба (Foo), внедряемая зависимостью (конструктор) в ряд компонентов. Этот сервис имеет свойство (Foo.timeZone). Один из компонентов должен привязать значение этого свойства к списку часовых поясов шаблонов - эффективно позволяя пользователю изменять часовой пояс и делая его доступным для других компонентов. Каков наилучший способ связать свойство foo.timeZone со списком выбора шаблонов?

  1. Public DI и привязать напрямую к свойству? конструктор ( public myFoo: Foo) {}
  2. Открытое свойство компонента, синхронизировать частное свойство DI и свойство открытого компонента.
  3. Что-то еще ...

Спасибо

1 Ответ

0 голосов
/ 15 октября 2019

Если вы используете OnPush, то лучше всего использовать Subject, потому что использование свойств публичной службы не вызывает обнаружение изменений.

https://stackblitz.com/edit/angular-paxamw

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TimeZoneService {

  private timeZone$ = new BehaviorSubject('America/Adak');

  getTimeZone() {
    return this.timeZone$.asObservable();
  }

  changeTimeZone(timeZone: string) {
    this.timeZone$.next(timeZone)
  }

}

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { TimeZoneService } from './time-zone.service';
import { Observable } from 'rxjs';


@Component({
  selector: 'hello',
  template: `
    <p>{{timeZone$ | async}} <small>Use Subject</small></p>
  `
  ,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent  {

  timeZone$: Observable<string>;

  constructor(public timeZoneService: TimeZoneService) {
    this.timeZone$ = this.timeZoneService.getTimeZone()
  }
}

Также создайте компонент средства доступа и затем используйте переменную ссылки шаблона. 

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { TimeZoneService } from './time-zone.service';
import { Observable } from 'rxjs';


@Component({
  selector: 'time-zone-accessor',
  template: ``,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TimeZoneAccessorComponent  {

  timeZone$: Observable<string>;

  constructor(public timeZoneService: TimeZoneService) {
    this.timeZone$ = this.timeZoneService.getTimeZone()
  }
}

Использовать справочную переменную шаблона. 

<time-zone-accessor #timeZone></time-zone-accessor>
<p>{{timeZone.timeZone$ | async}}</p>
...