Question

我在一个组件中有这个模板：

...
<div class="myCustomDirective">
    <input name="value" type="text" [(ngModel)]="value" />
</div>
...

我想更新myCustomDirective的值。像这样直接更新输入元素：

this.elementRef.nativeElement.querySelector('input').value = 'bla';

...不会更新组件中的模型。

使用Angular 4.2.6。

Answer 1

感谢@Pablo和他的链接Changing Component Property from Directive in Angular2，我找到了解决方案。

指令：

import {
    EventEmitter,
    Output
} from '@angular/core'

@Output() updateValue: EventEmitter < any > = new EventEmitter();

inAnyFunction() {
    this.updateValue.emit('bla');
}

在组件中：

...
<div (updateValue)="value = $event">
...

我每天都对Angular越来越失望。如果我使用[(ngModel)]我会期望以编程方式更新输入元素（因为当我手动和以编程方式更新输入元素时，为什么它会有所不同？）会传播更改。无用的框架会产生比解决方案更多的问题。

Answer 2

使用您的指令作为输入标记，如

<input myCustomDirective name="value" type="text" [(ngModel)]="value" />

导入并初始化ElementRef

 constructor(  public _el: 
     ElementRef) {
      }

然后您可以通过

轻松更改值

 this._el.nativeElement.value="your value"

它还会更新模型如果你想在每次改变时改变模型，那么

  import { Directive,ElementRef} from '@angular/core';
import {NgModel}from '@angular/forms';

  @Directive({
      selector: '[number][ngModel]',
        host: {'(ngModelChange)': 'doSomething($event)'}  
  })
  export class NumberDirective{
    constructor(  public _el: 
     ElementRef) {
      }
     doSomething(event){
       console.log(event);
       event=event.slice(4,event.length);
        this._el.nativeElement.value="check"+event;
     }  
  }

和html

 <input number [(ngModel)]="inputVal" (ngModelChange)="inputVal=$event" />

Answer 3

在程序化更改后，您可以在指令中使用Dispatch event（'输入'一个）。（ngModel）作为事件侦听器，因此这是手动和编程之间的实际差异。

以编程方式更新Angular 2中指令的输入值

3 个答案: