从常规 JavaScript 触发角度元素事件

Question

我正在尝试自动填充使用 Angular 编写的页面，我将其加载到我的应用程序的 web 视图中。

页面中有一个元素的语法如下：

<input id="element" ng-model="model" ng-blur="onInput('input')">

现在，我通过注入 JS 将数据从我的应用程序填充到字段中。

document.getElementById("element").value = "myvalue"

但是，ng-blur 事件没有触发。如果我在它触发的字段中手动输入数据。如何触发 ng-blur 事件？

我尝试在元素上调用常规的onblur 处理程序，但它是null。还尝试过这样的评估：

let elem = document.getElementById("element")
eval(elem.attributes["ng-blur"])

但这也失败了，因为范围错误。如何从常规 JavaScript 触发角度事件？

Answer 1

当元素失去焦点时会触发 Blur，因此当您点击外部时。 更改输入的值不会触发此事件。

在这里你可以像这样使用 ngModelChange：

<input id="element" [(ngModel)]="model" (ngModelChange)="onInput($event)">

ngModelChange 非常明确，当 ngModel 值改变时触发

此外，我不确定使用不带括号和括号的 ngModel 是否有效，但也许这是我不知道的语法。

最后一件事：在 Angular 中，你会得到带有 'ViewChild' 的元素

只需像这样在元素上添加一个引用：

<input id="element" #someInput [(ngModel)]="model" (ngModelChange)="onInput($event)">

然后在你的打字稿中你需要导入 ViewChild

import {Component,ViewChild} from '@angular/core';

然后像这样使用它：

export class AppComponent implements AfterViewInit {
   @ViewChild('someInput') someInput: Any;
   ngAfterViewInit() {
      this.someInput.value = 'Hey';
   }
 }