擴展 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 代碼

你的.component.ts

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

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

你的.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>

如果您需要獲得對輸入值的引用並且不想進行第二次訂閱（使用模板變量），則有一點變化。

你的.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

Answer 4

遲到是因為我發現這些都不是成功的。

// View input
<input-check [ngModel]="(bool$ | async)!" (ngModelChange)="startNextHop($event)"></input-check>

// component
public bool$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

startNextHop(event: any) {
    console.log(event); // on and off with the switch
}