javascript - 如何在不使用指令的情况下更改 html 事件处理程序中的 Angular 属性？

Question

我正在开发基于 Angular 2 的应用程序。我想知道我们是否可以在 HTML 事件处理程序中设置一个 Angular 变量，有什么可能的方法吗？下面给出的示例(识别图像加载并显示微调器)是为了让您了解该问题。

<img [class.hidden]="!loaded" src="{{imageUrl}}" 
    onload="{{loaded}}=true;" />

<img *ngIf="!loaded" src="loader.gif" />    

错误代码:

browser_adapter.js:77 EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'onload' since it isn't a known native property ([class.hidden]="!loaded" src="{{imageUrl}}" 
 [ERROR ->]onload="{{loaded}}=true;" />

Answer 1

<img [class.hidden]="!loaded" src="{{imageUrl}}" 
    (load)="loaded=true" />

(eventName)="eventHandler" 用于订阅 Angular2 中的事件。
onload 是 load 事件的 JavaScript 事件处理程序。对于 Angular2，您可以通过省略 on 并仅使用普通事件名称来订阅事件。

提示

您应该知道，如果表达式结果为 false，这会导致在事件上调用 preventDefault

<img [class.hidden]="!loaded" src="{{imageUrl}}" 
    (load)="loaded=false" />

要解决 ;true 可以添加，以便整个表达式结果为 true

<img [class.hidden]="!loaded" src="{{imageUrl}}" 
    (load)="loaded=false;true" />