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

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

1 个答案: