Обнаружение угловых изменений для сервисных переменных и данных

Я создал службу настроек приложения для моего локального хранилища угловых приложений. Я хочу создать, проверить, получить и установить все настройки локального хранилища верхнего уровня отсюда.

Пока это работает так, как ожидалось, но теперь я хочу, чтобы обнаружение изменений в службе прослушивало изменения в объектах конфигурации настроек, которые существуют в службе.

В основном я хочу использовать onChanges в службе.

Например:

Служба настройки:

constructor() {
   this.set_AppSettings();
}

public app_Settings: AppSettingsConfig = {
   appConfig: {
     showSideBar: null,
     collapsedSideBar: null,
     lastRoute: null,
     showAppIDBar: null,
     isDarkTheme: null
   }
};

// Methods that handle localstorage stuff.

AppComponent.ts:

constructor(
    public _settings: SettingsService
) {}

toggle() {
  _settings.app_Settings.appConfig.showSideBar = !_settings.app_Settings.appConfig.showSideBar
}

AppComponent.html:

<button mat-flat-button (click)="toggle()"
     Toggle Side Bar
</button>

Я хочу обнаружить, что это значение изменилось в моей службе настроек, а затем запустить соответствующий метод, чтобы установить новое значение в локальное хранилище.

Я не хочу вызывать метод, который устанавливает новое значение локального хранилища из моей службы, каждый раз, когда я изменяю переменную в компоненте. Я чувствую, что это было бы ненужным, если бы я мог просто слушать изменения в службе.

Это достижимо или я должен изменить свой подход?


angular angular-changedetection angular-services
person CAlex    schedule 27.08.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

в службах нет ngOnChanges, я бы сделал следующее:

сервис.тс

private defaultConfig : AppSettingsConfig = {
   appConfig: {
     showSideBar: null,
     collapsedSideBar: null,
     lastRoute: null,
     showAppIDBar: null,
     isDarkTheme: null
   }
};
private settings : BehaviorSubject<AppSettingsConfig> = new BehaviorSubject<AppSettingsConfig>(this.defaultConfig);
private app_Settings: AppSettingsConfig = defaultConfig;

settings$ : Observable<AppSettingsConfig>;

constructor() {
   this.settings$ = this.settings.asObservable();
}

updateConfig(val: Partial<AppSettingsConfig>) {
   this.app_Settings = {...this.app_Settings, ...val };
   this.settings.next(this.app_Settings);
}

app.component

private settings: AppSettingsConfig;

constructor(
    public settingService: SettingsService
) {}

ngOnInit() {
  this.settingService.subscribe((settings) => this.settings = settings);
}

toggle() {
  _settings.updateSettings({ appConfig : { showSideBar : !this.settings.appConfig.showSideBar } } ); 
}

в др.компонентах



constructor(
    public settingService: SettingsService
) {}

ngOnInit() {
  this.settingService.subscribe((settings) => { ... do something with settings });
}
person Reza    schedule 27.08.2019

arrow_upward
1
arrow_downward

Вы можете использовать BehaviorSubject(), который будет передавать изменения в объект настроек, а также облегчить исправление модификаций. Компонент может использовать селектор для прослушивания определенных значений и может вызывать методы для исправления значений.

@Injectable()
export class SettingsService {
    private _settings = new BehaviorSubject<AppSettingsConfig>({
        showSideBar: false,
        collapsedSideBar: false,
        lastRoute: null,
        showAppIDBar: null,
        isDarkTheme: null
   });

   public get settings$(): Observable<AppSettingsConfig> {
      return this._settings.asObservable();
   }

   public get snapshot(): AppSettingsConfig {
      return this._settings.getValue();
   }

   public selectShowSideBar(): Observable<boolean> {
        return this._settings.pipe(
           map(state => state.showSideBar),
           distinctUntilChanged()
        );
   }

   public setShowSideBar(showSideBar: boolean) {
       this.patch({showSideBar});
   }

   private patch(value: Partial<AppSettingsConfig>) {
      this._settings.next({...this._settings.getValue(), ...value});
   }
}

_settings использует субъект поведения для отправки изменений в настройки. Вы вызываете selectShowSideBar(), чтобы создать селектор, который генерирует только свойство showSideBar, и вызываете setShowSideBar(), чтобы исправить состояние новыми значениями. Вы можете добавить дополнительные методы по мере необходимости.

Компонент будет использовать сервис следующим образом:

public showSideBar$: Observable<boolean> = this._settings.selectShowSideBar();

constructor(public _settings: SettingsService) {}

toggle() {
  this._settings.setShowSideBar(!this._settings.snapshot.showSideBar);
}

onInit() {
   this.showSideBar$.subscribe(value => console.log('value changed', value);
}
person Reactgular    schedule 27.08.2019