Angular2のStep by Stepでひっかかったところ

Angular2 for Dartで気づいたことですがおそらくJSでも変わらないはず。

スクリプト側はこんなComponent

@Component(selector: 'my-app')
@View(templateUrl: 'app_component.html')
class AppComponent {
}

Case.1 (works well)

app_component.html

<input #myname (keyup)>
<p>{{ myname.value }}</p>

Case.2 (error!)

app_component.html

<input #myName (keyup)>
<p>{{ myName.value }}</p>

Exception: Uncaught Error: Class 'AppComponent' has no instance getter 'myName'.

What's happened?

違いはmynameとmyNameである。

1行目のHTMLタグ中に書かれた#mynameはDirectiveである。よって命名規則は

Must not contain any uppercase ASCII letters.

である。ただし即エラーになるわけではなく、大文字英数字が含まれている場合はDart(or JS)側のオブジェクトであるとしてスコープ内の検索を行う。今回はAppComponentに同名のgetterやmethod、propertyが存在しないのでエラーとなる。しかしたとえComponent側にmyNameプロパティを持っていたとしてもそれは本来の#myNameとしてのバインドは行われず、うまく動かない。

2行目の{{ myname.value }}中のmynameはAngular2側で解釈される部分であるため、命名規則はなく単純に文字列DIでバインドされるだけである。

ちなみにPolymerやCustomElementを触ったことがある人ならすぐにわかると思うが、次のパターンは正常に動作する

<input #my-name (keyup)>
<p>{{ myName.value }}</p>