typescript 以编程方式更新来自 Angular 2 指令的输入值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45588619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programatically update input value from directive in Angular 2
提问by alexhribsek
I have this template in a component:
我在一个组件中有这个模板：
...
<div class="myCustomDirective">
<input name="value" type="text" [(ngModel)]="value" />
</div>
...
I want to update the value from myCustomDirective. Updating the input element directly like this:
我想从myCustomDirective. 像这样直接更新输入元素：
this.elementRef.nativeElement.querySelector('input').value = 'bla';
... doesn't update the model in the component.
...不更新组件中的模型。
Using Angular 4.2.6.
使用 Angular 4.2.6。
回答by alexhribsek
Thanks to @Pablo and his link Changing Component Property from Directive in Angular2, I found my solution.
感谢@Pablo 和他的链接从 Angular2 中的指令更改组件属性，我找到了我的解决方案。
In directive:
在指令中：
import {
EventEmitter,
Output
} from '@angular/core'
@Output() updateValue: EventEmitter < any > = new EventEmitter();
inAnyFunction() {
this.updateValue.emit('bla');
}
In component:
在组件中：
...
<div (updateValue)="value = $event">
...
I'm more and more disappointed by Angular every day. If I'm using [(ngModel)]I would expect that updating the input element programatically (because why is it different when I update the input element manually and programatically?) would propagate the change. Useless framework that creates more problems than solutions.
我每天都对 Angular 越来越失望。如果我正在使用，[(ngModel)]我希望以编程方式更新输入元素（因为为什么当我手动和以编程方式更新输入元素时会有所不同？）会传播更改。造成问题多于解决方案的无用框架。
回答by vaibhavmaster
use your directive as input tag like
使用您的指令作为输入标签，如
<input myCustomDirective name="value" type="text" [(ngModel)]="value" />
import and initialize ElementRef
导入并初始化 ElementRef
constructor( public _el:
ElementRef) {
}
and then you can easily change the value by
然后你可以很容易地改变这个值
this._el.nativeElement.value="your value"
it will also update model if you want to change model at every change then
如果您想在每次更改时更改模型，它也会更新模型
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;
}
}
and in html
并在 html
<input number [(ngModel)]="inputVal" (ngModelChange)="inputVal=$event" />
回答by bromi
You could use Dispatch event('Input' one) in your directive after programmatic change. (ngModel) works as event listener, so that is the actual difference between manually and programmatically.
编程更改后，您可以在指令中使用Dispatch 事件（“输入”一个）。(ngModel) 用作事件侦听器，因此这是手动和编程之间的实际区别。
