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>