如何在不使用指令的情况下更改html事件处理函数内的角度属性？

Question

我正在开发基于Angular 2的应用程序。我想知道我们是否可以在HTML事件处理程序中设置角度变量，是否有任何可能的方法？ 下面给出的例子（识别图像加载和显示一个微调）是给出一个关于这个问题的想法。

<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" />