使用$event "Angular 2 could not understand the value in View#template"

Question

我无法$event工作。例：

import 'package:angular2/core.dart';
@Component(
selector: 'my-app', 
template: '''
<h1>{{title}}</h1>
<button (click)="onTest($event)">testing</button>
''')
class AppComponent {
String title = 'Testing event';
onTest(event) {
print(event);
}
}

当我让 pub 提供应用程序时，我抛出了一个构建错误：

Build error:
Transform DirectiveProcessor on file_transfer|lib/app_component.dart threw error: Angular 2 could not understand the value in View#template.
'''
<h1>{{title}}</h1>
<button (click)="onTest($event)">testing</button...
package:angular2/src/transform/common/type_metadata_reader.dart 164:5   _expressionToString
package:angular2/src/transform/common/type_metadata_reader.dart 920:17  _CompileTemplateMetadataVisitor._populateTemplate
package:angular2/src/transform/common/type_metadata_reader.dart 901:9   _CompileTemplateMetadataVisitor.visitNamedExpression
package:analyzer/src/dart/ast/ast.dart 7455:15                          NamedExpressionImpl.accept
...

我还尝试将(单击)更改为ng-click，因为在这里$event AngularDart 1.0中不再可用 - 还有什么替代方案？ 但它没有帮助。

我是 angular 的新手，但上面的代码应该可以工作，对吧？我看了 https://webdev.dartlang.org/angular/guide/template-syntax#!#event-binding 和英雄的例子，其中也使用了$event。看不出任何区别...

任何帮助，不胜感激。

Answer 1

如果模板位于自己的文件中，则此代码段可以正常工作。

但是，由于模板位于.dart文件中，因此字符串中的任何$variable都将计算为该上下文中的variable值。

在这种情况下，以下任一方法都可以完成此操作：

1. 转义模板中的$。取代

<button (click)="onTest($event)">testing</button>

跟

<button (click)="onTest($event)">testing</button>

2. 使用原始字符串作为模板：

template: r''' ...template content... ''')