扩展 Angular 2 ngModel 指令以使用 observables

Question

Angular 2 ngModel 指令适用于变量和函数，例如

<input [ngModel]="myVar" (ngModelChange)="myFunc($event)" />

我想用 BehaviorSubjects 代替变量和函数

<input [ngModel]="mySubject | async" (ngModelChange)="mySubject.next($event)" />

有没有一种安全的方法来扩展 ngModel 或使用某种宏来减少模板中的重复？

<input [myNewNgModel]="mySubject" />

Answer 1

我不知道您为什么不只使用反应式表单，但这是一个有趣的谜题。我创建了一个指令，将模型值更改为BehaviorSubject 的值。任何更改都会为您调用BehaviorSubject 上的.next。

用法如下所示

<input type="text" [ngModel]="ngModelValue" appRxModel> 

这里是stackblitz，享受吧

Answer 2

我想出了一个与@Adbel 类似的方法。不确定这个的内在含义，但有一些反馈会很棒。 Stackbliz code

Your.component.ts

export class AppComponent  {
  email = new BehaviorSubject("UnwrappedMe ?");

  emailHandler(input) {
    this.email.next(input);
  }
}

Your.component.html

 <form class="mx-3">
     <input [ngModel]="email | async" 
            (ngModelChange)="emailHandler($event)" 
            name="email" type="email" 
            id="email" placeholder="Enter email">
 </form>

 <p class="mx-3"> {{ email | async }} </p>

如果您需要获取输入值的引用，请稍作改动 并且您不想进行第二次订阅（使用模板变量）。

Your.component.html

 <form class="mx-3">
     <input [ngModel]="email | async" #emailref
            (ngModelChange)="emailHandler($event)" 
            name="email" type="email" 
            id="email" placeholder="Enter email">
 </form>

 <p class="mx-3"> {{ emailref.value }} </p>

Answer 3

您真的想为表单中的每个输入字段创建一个可观察对象吗？我使用的模式是为整个表单的模型创建一个 observable，将其克隆为一个视图变量，然后您可以绑定到该变量，然后让表单的提交处理程序将新模型推送回服务。

user$ = this.userService.user$;

save(user: User) {
  this.userService.save(user);
}

在视图中

<form *ngIf="user$ | async | clone as user" #userForm="ngForm" (submit)="userForm.form.valid && save(user)">
  <label>
    Firstname
    <input name="firstname" [(ngModel)]="user.firstname" required>
  </label>
  <label>
    Lastname
    <input name="lastname" [(ngModel)]="user.lastname" required>
  </label>
  <button>Save</button>
</form>

克隆管道如下所示

export const clone = (obj: any) =>
  Array.isArray(obj)
    ? obj.map(item => clone(item))
    : obj instanceof Date
    ? new Date(obj.getTime())
    : obj && typeof obj === 'object'
    ? Object.getOwnPropertyNames(obj).reduce((o, prop) => {
        o[prop] = clone(obj[prop]);
        return o;
      }, {})
    : obj;

import { Pipe, PipeTransform } from '@angular/core';

import { clone } from './clone';

@Pipe({
  name: 'clone'
})
export class ClonePipe implements PipeTransform {

  transform(value: any): any {
    return clone(value);
  }
}

我在这里用我的状态管理库写了一篇关于这种模式的文章。 https://medium.com/@adrianbrand/angular-state-management-with-rxcache-468a865fc3fb