Angular 8+ Observable - Шаблон для обновления основного значения? - PullRequest
Новая
       28

Angular 8+ Observable - Шаблон для обновления основного значения?

1 голос
/ 27 марта 2020

У меня есть вопрос об использовании Observables в Angular 8/9. Мой шаблон использует асинхронный канал c на наблюдаемом объекте, который отлично подходит для отображения данных. Но что, если я хочу обновить это? Я ищу образец хорошей практики здесь.

В одном из моих рабочих приложений есть служба, которая связывается с HTTP-сервером для получения Observable. Он превращает эту наблюдаемую в BehaviorSubject и публикует свою собственную наблюдаемую BehaviorSubject. Компонент внедряет службу, получает локальную копию наблюдаемого, и шаблон считывает его значение с помощью асинхронного канала c. Шаблон имеет обработчик событий, который позволяет редактировать; функция компонента вызывает метод "mutate" в сервисе, который обновляет значение субъекта, и вызывает .next () для него.

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

Спасибо!

Примеры сокращенного кода:

Модель: 

public class Person {
    firstName: string;
    lastName: string;
}

Сервис: 

public class PersonService {
    private personSubj: BehaviorSubject<Person>(null);
    public person$: Observable<Person> = this.personSubj.asObservable();

    public mutateFirstName(newName: string): void {
        this.personSubj.value.firstName = newName;
        this.personSubj.next(this.personSubj.value)
    }

    private getFromHttp(): void {
        this.http.getPerson().subscribe(p => this.personSubj.next(p));
    }
}

Компонент: 

public class PersonComponent {
    // personService is injected in constructor
    this.person$ = this.personService.person$;
}

Шаблон: 

 <div *ngIf="(person$ | async) as person">
    <input value="person.firstName" (click)="mutateFirstName('Sam')" />
 </div>
...