扩展Angular 2 ngModel指令以使用observable

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

我想出了一个与@Adbel类似的方法。不确定这的内在含义，但如果能得到一些反馈那就太好了。Stackbliz 代码

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

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

用法将如下所示

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

这是stackblitz，享受吧