Шаблон разработки View Model (VM) - это простой способ создания интеллектуальных компонентов, который делает их более удобными и гибкими, а также упрощает работу с RxJS Observables.
Как использовать шаблон ВМ
Чтобы реализовать паттерн View Model, вам нужно выполнить 3 простых шага:
- Создайте интерфейс, содержащий все данные, необходимые для рисования шаблона вашего компонента:
2. Создайте наблюдаемый объект, который предоставляет эти данные через свойство vm$:
3. Используйте *ngIf и async канал, чтобы распаковать свойство vm$ и сохранить его в локальной переменной для использования в вашем шаблоне:
Зачем использовать шаблон виртуальной машины?
Шаблон VM позволяет работать со сложными реактивными источниками данных с помощью RxJS Observables. Компоненты в больших реактивных приложениях быстро становятся очень сложными, и шаблон виртуальной машины упрощает ситуацию.
Использовать OnPush обнаружение изменений в Angular намного проще, потому что канал async заботится о запуске обнаружения изменений и очистке подписки при уничтожении компонента.
Шаблоны вашего компонента не тесно связаны с вашим доменом, изменение данных также более явное, а внутреннее состояние более управляемо.
Другие вопросы
Почему к свойству vm$ добавляется суффикс $?
По соглашению, переменные, содержащие наблюдаемые объекты, именуются таким образом. Это также позволяет нам распаковать переданные данные в локальную переменную с именем vm. Однако это необязательно.
Что случилось с *ngIf?
На данный момент *ngIf="vm$ | async as vm" - лучший способ распаковать наблюдаемый поток из шаблона компонента. Синтаксис as vm указывает Angular принять излучение и сохранить его в локальной переменной с именем vm, к которой мы можем получить доступ в div. Однако стоит отметить, что Angular не будет отображать шаблон до тех пор, пока наблюдаемый объект не выдаст правдивое значение.
Как мне реагировать на @Input изменение свойств?
Вы можете использовать ловушку жизненного цикла ngOnChanges, чтобы сделать частное Subject излучение и включить этот объект в вашу наблюдаемую цепочку с помощью операторов типа combineLatest или switchMap.
Как мне обрабатывать внутреннее состояние?
Вы можете использовать закрытое BehaviorSubject для обработки внутреннего состояния. Вы можете определить второй интерфейс с именем State, который содержит только те свойства, значения которых будут меняться, и включить это в наблюдаемый поток. Вот пример:
